alternate
alternate意为“交替”，即normal和reverse交替之行，先normal再reverse 。
reverse alternate
反向交替，先reverse再normal 。
(4) Animation Timing function
和transition一样，keyframes也可以设置timing function，常用的timing function归纳如下：
ease：默认方法，初速度较慢，然后加速再减速
ease-in：初速度最慢，然后一直加速
ease-out：初速度最快，然后一直减速
ease-in-out：初速度较慢，然后加速再减速，与ease的区别在于加速减速过程是对称的
linear：恒速运动
直观表现如下(codepen)：
除了上面现成的方法，我们可以通过贝塞尔曲线自定义速度曲线 。我们可以在 http://cubic-bezier.com 可视化的创建我们自己的贝塞尔曲线 。比如创建一个刚开始极慢，突然变得极快的曲线：
css:
效果：
是不是挺神奇!
(5) Chain Animation
我们可以将多个animation串联使用，比如我们想让小人在行驶的过程中跳跃，可以这么写：
css:
效果：
实践
本文目的在于普及css3 animation的基础，并未完全覆盖animation的知识，未涉及和讲解的知识请大家见谅。掌握上述知识后，我们就已经可以用animation做出丰富的动画效果了，下面列出一些codepen上的小例子：
full mario demo
animated popup
fly items to shopping cart
flipping cards
推荐阅读
- 多普达568新手入门
- css3.0新属性效果在ie下的解决方案介绍
- 新手入门如何查看903sh版本
- 让IE6/IE7/IE8支持CSS3属性的办法有哪些？支持CSS3属性8种方法介绍
- 3250新手入门
- 让IE6、IE7、IE8支持CSS3的圆角、阴影样式
- ie-css3.htc 让IE6, 7, and 8也支持box-shadow
- 主要针对566以及586等Q屏手机 给smartphone新手入门和软件推荐
- 解读MOTO ROKR E2之入门使用
- IE下实现类似CSS3 text-shadow文字阴影的几种方法