第一步，@keyframes 定义动画规则，包括动画名称以及起始/结束样式。
语法.
@keyframes 动画名称{
from {样式1，样式2，。。。}
to {样式1，样式2，。。。}
}
亦可
@keyframes 动画名称{
0% {样式1，样式2，。。。}
60% {样式1，样式2，。。。}
…….
100% {样式1，样式2，。。。}
}
可用top，bottom，left，right定位，使位置改变。
补充说明.
IE10及以上，Opera，Firefox，Chrome，Safari支持@keyframes规则及animation属性。
部分特殊内核的浏览器需加前缀，如chrome和safari的内核是webkit，需加-webkit-前缀。
关于浏览器内核，可参考链接 各主流浏览器介绍
第二步，animation为元素绑定动画，以及设置动画持续时长等属性。
语法.
选择器 {
animation:动画名称 5s; /* 时长默认为0，不定义则动画不生效 */
-moz-animation:动画名称 5s; /* firefox */
-webkit-animation:动画名称 5s; /* Chrome，Safari */
-o-animation: 动画名称 5s; /* Opera */
}
补充说明.
animation为简写形式，默认值：none 0 ease 0 1 normal，其中包含：
1. animation-name：keyframe规则名称，默认none(无动画)
2. animation-duration：定义动画完成一个周期需要多长时间，可以s/ms为单位。默认0(无动画)
3. animation-timing-function：规定动画的速度曲线，如匀速。默认ease。
a. linear：匀速
b. ease：低速开始，然后加快，结束前变慢
c. ease-in：低速开始
d. ease-out：低速结束
e. ease-in-out：以低速开始和结束
f. cubic-bezier(n,n,n,n)：自定义曲线，可能值为从0到1
4. animation-delay：延时播放，允许负值(使动画马上开始，但是动画会跳过负值时间。比如过delay-2，duration5，那么动画会直接从2秒之后开始播放)
5. animation-iteration-count：规定动画播放的次数，默认1，也可指定为infinite(无限次播放)
6. animation-direction：规定是否轮流反向播放动画，默认normal。指定为alternate时，动画轮流反向播放(奇数135正常播放，偶数反向播放)
额外属性
animation-fill-mode： 动画开始前或结束后，元素是否填充。可取值如下：
a. none：不改变默认行为。
b. forwards: 动画结束后，以最后一帧(to)作为填充
c. backwards：动画开始前(animation-delay时)，以初始帧(from)作为填充
d. both：应用forwards和backwards。
本文内容参考了w3cschool 动画教程w3school CSS3动画教程
