css3的animation动画

 

用的前提考虑浏览器是否支持，

internet Explorer10、firefox、opera是支持keyframes规范和animation属性的，而safari和chrome则要使用前缀-webkit-。

webapp中：

⚠注意：internet explorer9及其更早的版本不支持keyframes规范和animation属性。

学习animation，要先学习@keyframes 规则 

　　关于keyframes：

　　  from{}to{}来创建动画效果。除了fromto之外，还可以用百分比来创建动画。

创建后要将它绑定某个选择器上，不然用不了，还要规定动画的时间。

接下来就可以开始了解animation咯。

下面的表格是一些属性：运用效果如上图⬆️

关于animation这个属性的语法如下图：

animation: name duration timing-function delay iteration-count direction;

animation-duration:time

animation-timing-function: value　　　　

　　　　value可取这9种：

　　　　　ease 　　　　默认。动画以低速开始，然后加快，在结束前变慢。

　　　　　linear 　　　 动画从头到尾的速度是相同的。　　

　　　　　ease-in        动画以低速开始

　　　　　ease-out      动画以低速结束。

　　　　　ease-in-out  动画以低速开始和结束

　　　　　steps([n, [ start | end ] ]) 阶梯函数，这个函数可以把动画平均划分为基本相等的，这个n是一个自然数，意思就是把一个动画平均分成n等分，直到平均地走完这个动画     ［关于这个属性的详情可查看http://www.tuicool.com/articles/neqMVr］

　　　　　step-start    step-start等同于steps(n,start)，动画分成n步，动画执行时为开始左侧端点的部分为开始

　　　　　step-end     step-end等同于steps(n,end)：动画分成n步，动画执行时以结尾端点为开始，默认值为end。

　　　　　cubic-bezier(x1, y1, x2, y2)  即为贝兹曲线中的绘制方法 

　　　　　

　　　　　图上有四点，P0-3，其中P0、P3是默认的点，对应了[0,0], [1,1]。而剩下的P1、P2两点则是我们通过cubic-bezier()自定义的。cubic-bezier(x1, y1, x2, 　　　　y2) 为自定义，x1,x2,y1,y2的值范围在[0, 1]。P1(x1,y1),P2(x2,y2)。

animation-delay:time

animation-iteration-count: n|infinite　　　　[n为次数，infinite为无限循环。]

animation-direction: normal|alternate         [normal动画应该正常播放|alternate动画应该轮流反向播放。]

animation-play-state: paused|running　　　[paused暂停|running播放]

animation-fill-mode: none | forwards | backwards | both;  [none:不改变｜forwards:当动画完成后，保持最后一个属性值（在最后一个关键帧中定义）。backwards:在 animation-delay 所指定的一段时间内，在动画显示之前，应用开始属性值（在第一个关键帧中定义）。both:向前和向后填充模式都被应用。]