第一步，@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动画教程