1、首先了解语法：添加语法animation: name duration timing-function delay iteration-count direction fill-mode play-state;此语法为缩写。每个属性也可单独来写。
2、属性说明：animation-name：指定要绑定到选择器的关键帧的名称。这个属性是你说要绑定的动画名称，一般新建一个动画则需需要添加,名字；例：animation-name：myAnimate;
3、animation-duration：动画指定需要多少秒或毫秒完成。例：animation-duration:2s;
4、animation-timing-function：设置动画以什么方式完成一个周期。例：animation-timing-function：linear;可选属性：linear动画从头到尾的速度是相同的。ease默认。动画以低速开始，然后加快，在结束前变慢。ease-in动画以低速开始。ease-out动画以低速结束。ease-in-out动画以低速开始和结束。
5、animation-delay：设置动画在启动前的延迟间隔。例：animation-delay:2s;
6、animation-iteration-count：定义动画的播放次数。例：animation-iteration-count:3;可选属性：n一个数字，定义应该播放多少次动画测试 »infinite指定动画应该播放无限次（永远）
7、animation-direction：指定是否应该轮流反向播放动画。animation-direction: normal|reverse|alternate|alternate-reverse|initial|inherit;例：animation-direction:alternate;可选属性：normal默认值。动画按正常播放。reverse动画反向播放。alternate动画在奇数次（1、3、5...）正向播放，在偶数次（2、4、6...）反向播放。alternate-reverse动画在奇数次（1、3、5...）反向播放，在偶数次（2、4、6...）正向播放。
8、animation-fill-mode：规定当动画不播放时（当动画完成时，或当动画有一个延迟未开始播放时），要应用到元素的样式，把物体动画地从一个地方移动到另一个地方，并让它停留在那里，即保持动画完成时设定的位置。例：animation-fill-mode:forwards;可选属性：none默认值。执行后回到原地。forwards在动画结束后（由 animation-iteration-count 决定），动画将应用该属性值。backwards动画将应用在 animation-delay 定义期间启动动画的第一次迭代的关键帧中定义的属性值。这些都是 from 关键帧中的值（当 animation-direction 为 "normal" 或 "alternate" 时）或 to 关键帧中的值（当 animation-direction 为 "reverse" 或 "alternate-reverse" 时）。both动画遵循 forwards 和 backwards 的规则。也就是说，动画会在两个方向上扩展动画属性。
9、animation-play-state：指定动画是否正在运行或已暂停。例：animation-play-state:paused;可选属性：paused指定暂停动画测试 »running指定正在运行的动画
10、上面是设定动画的运行的方式。还要配合@keyframes 。例//myAnimate 即上面的动画名称，和animation-name保持一致@keyframesmyAnimate｛ form{top:100px;} to{ top:200px;}｝意思为动画从top100px位移到top200px;还可以写为@keyframesmyAnimate｛ 0%{top:100px;} 100%{top:200px;}｝当使用百分比，就可以设定详细的步骤。比如@keyframesmyAnimate｛ 0%{top:100px;background:red;} 10%{left:100px;width:300px;} 23%{right:130px;height:250px;} 68%{bottom:100px;} 100%{top:200px;}｝百分比大括号内写，在指定步骤内css的样式。
11、所有属性的例子：div {animation-name: myfirst;animation-duration: 5s;animation-timing-function: linear;animation-delay: 2s;animation-iteration-count: infinite;animation-direction: alternate;animation-play-state: running;/* Firefox: */-moz-animation-name: myfirst;-moz-animation-duration: 5s;-moz-animation-timing-function: linear;-moz-animation-delay: 2s;-moz-animation-iteration-count: infinite;-moz-animation-direction: alternate;-moz-animation-play-state: running;/* Safari 和 Chrome: */-webkit-animation-name: myfirst;-webkit-animation-duration: 5s;-webkit-animation-timing-function: linear;-webkit-animation-delay: 2s;-webkit-animation-iteration-count: infinite;-webkit-animation-direction: alternate;-webkit-animation-play-state: running;/* Opera: */-o-animation-name: myfirst;-o-animation-duration: 5s;-o-animation-timing-function: linear;-o-animation-delay: 2s;-o-animation-iteration-count: infinite;-o-animation-direction: alternate;-o-animation-play-state: running;}同时可写为div {animation: myfirst 5s linear 2s infinite alternate;/* Firefox: */-moz-animation: myfirst 5s linear 2s infinite alternate;/* Safari 和 Chrome: */-webkit-animation: myfirst 5s linear 2s infinite alternate;/* Opera: */-o-animation: myfirst 5s linear 2s infinite alternate; }//结合keyframes 就完成一个兼容所有支持css3动画的一个小动画@keyframes myfirst{0% {background:red; left:0px; top:0px;}25% {background:yellow; left:200px; top:0px;}50% {background:blue; left:200px; top:200px;}75% {background:green; left:0px; top:200px;}100% {background:red; left:0px; top:0px;}}@-moz-keyframes myfirst /* Firefox */{0% {background:red; left:0px; top:0px;}25% {background:yellow; left:200px; top:0px;}50% {background:blue; left:200px; top:200px;}75% {background:green; left:0px; top:200px;}100% {background:red; left:0px; top:0px;}}@-webkit-keyframes myfirst /* Safari and Chrome */{0% {background:red; left:0px; top:0px;}25% {background:yellow; left:200px; top:0px;}50% {background:blue; left:200px; top:200px;}75% {background:green; left:0px; top:200px;}100% {background:red; left:0px; top:0px;}}@-o-keyframes myfirst /* Opera */{0% {background:red; left:0px; top:0px;}25% {background:yellow; left:200px; top:0px;}50% {background:blue; left:200px; top:200px;}75% {background:green; left:0px; top:200px;}100% {background:red; left:0px; top:0px;}}
