CSS3（3）动画

现在的网页设计风格多样，个人比较喜欢简约风的或者交互性强的。那种有舒服的动画效果的应用可以给我玩半天。今天这篇就总结一下CSS3中的动画属性和基本应用，后面会出一些动画制作效果。
CSS3中制作动画需要两个东西，一个是@keyframes 规则,另一个是animation动画属性。由于没有写实例，下面贴一篇菜鸟教程上面的实例供参考，先不要阅读代码：

 





注意: 该实例在 Internet Explorer 9 及更早 IE 版本是无效的。

代码看起来较多，但我们只需要关注@keyframes和animation。@keyframes是用来规定动画，后面跟动画的名称。指定动画过程使用％，或关键字"from"和"to"，这是和0％到100％相同，上面的示例是使用了%的方式。animation用来指定动画属性，上面示例中用的是简略写法，每个参数的属性依次是：

animation: name duration timing-function delay iteration-count direction fill-mode play-state;

分别指定动画的名称、动画完成所需时间、动画完成一个周期的速度是怎样的（这个具体是有不同参数的，可以参考http://www.runoob.com/cssref/css3-pr-animation-timing-function.html）、动画启动前的延迟、动画播放次数（infinite是永久播放）、是否反向播放。最后两个参数可以不用指定，使用默认值，具体作用可参考http://www.runoob.com/cssref/css3-pr-animation.html。