用的前提考虑浏览器是否支持，
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:向前和向后填充模式都被应用。]