一直以来，JavaScript的动画都是通过定时器和间隔来实现的。虽然使用CSS transitions 和 animations使Web开发实现动画更加方便，但多年来以JavaScript为基础来实现动画却很少有所改变。直到Firefox 4的发布，才带来了第一种对JavaScript动画的改善的方法。但

　　  首先贴个官网：https://daneden.github.io/animate.css/　　1、引入animate css文件 1 head2 link rel="stylesheet" href="animate.min.css"3 /head 　　2、给指定的元素加上指定的动画样式名div class="animated bounceOutLeft"/div　　　　这里包

!DOCTYPE htmlhtmlheadmeta charset="utf-8"titleCSS3全屏背景图片缩小渐变自动切换代码/title!-- link rel="stylesheet prefetch" href="http://fonts.useso.com/css?family=Raleway:300" --style type="text/css"*{margin:0;padding:0;}.slideshow

实际效果：@-webkit-keyframes gogogo {0%{-webkit-transform: rotate(0deg); border:5px solid red;}50%{-webkit-transform: rotate(180deg);background:black; border:5px solid yellow;}100%{-webkit-transform: rotate(360deg);background:white; border:

这篇文章。　　Velocity.js包含两个输入参数，第一个参数用于规定产生的动画效果，第二个参数为可选参数，用于规定动画的额外选项。具体如下：1234567891011121314$("div").velocity({     property1: value1,    property2: value2}, {    /* De

css hover 动画 transition:background-color 0.2s,color 0.2s; 外层套内层，正常是 里外层 鼠标上来 外层有hover，如果就想到里层hover触发外层hover，要用外层position 定义绝对定位，内层的hover跳出外层的div，这样视觉上就是两个单独的div，进行内外层联

CSS3提供两种方式来实现动画，transition与animation。animation涉及自定义一种为“@keyframes”的东西，这个需要动用到insertRule太复杂了，因此本文跳过它。有人它为transform也算一种，但它是静态的，需要结合transition才能变成动态，因此也跳过。transit

把响应式布局和动画放在一起写是因为他们有个共同点@符号先讲讲响应式布局@media 响应式布局曾经非常的流行，这种布局方式可以做出一也兼容一切设备的页面，但是当页面的功能越来越多，css文件越来越大，兼容难度越来越大，js也会很难写，于是他们离开了历史

首先要定义一个动画效果  keyframes 关键字这里动画效果执行完毕后 恢复本身的css样式  有的动画效果 移动到位置 要保持 就需要写好css 元素的位置css里直接写  (这里是一般的 也就是ie10 ie11)@keyframes 动画名称{from{ color:#000;}to{ color:red;}}谷

https://segmentfault.com/a/1190000018125564  很完善了，重点是两个过程图。 style.fade-enter{opacity: 0;}.fade-enter-active{transition: opacity 3s;}/* .fade-enter-to{color: red;}.fade-leave{color: green;} */.fade-leave-to{opacity: 0;}.fade-l

@keyframes规则用于创建动画。 @keyframes 中规定某项 CSS 样式，就能创建由当前样式逐渐改为新样式的动画效果@keyframes 中创建动画时，请把它捆绑到某个选择器，否则不会产生动画效果。通过规定至少以下两项 CSS3 动画属性，即可将动画绑定到选择器：规定动

因为工作需要要将五六十张逐帧图拼成雪碧图，网上想找到一件制作工具半天没有找到，就自己用canvas写了一个。写成之后就再没有什么机会使用了，因此希望有人使用的时候如果遇到bug了能及时反馈给我。最近用vue2 + webpack重新构建了下，代码量挺简洁的，逻辑

基本动画show() //直接显示元素，没有动画show(speed, [callback]) //有动画，有回调函数hide() //直接隐藏元素，没有动画hide(speed, [callback]) //有动画，有回调函数toggle() //切换可见状态toggle(speed, [callback]) //有动画效果toggle(switch) //swit