CSS3变形与动画（下）

keyframes被称为关键帧

主要以@keyframes开头

Chrome和 Safari 需要前缀 -webkit-；Foxfire 需要前缀 -moz-

---

animation-name: 动画的名称

animation-duration：动画所持续的时间长

animation-timing-function：动画的播放方式

---

animation-delay：动画延迟的时间

animation-iteration-count：动画的播放次数，一般是正数，如果设置infinite则无限循环

animation-direction：动画播放方向，两个值（normal、alternate）alternate,动画播放在第偶数次向前播放，第奇数次向反方向播放

animation-play-state：控制元素动画的播放状态running和paused

animation-fill-mode：在动画开始之前和结束之后发生的操作（backwards会在动画开始前显示动画的第一帧，例如当动画是在页面加载完成后5秒开始，动画是由红色渐变为绿色，而div本来的背景色是黑色。那么设置backwards属性会使得在动画尚未开始的前五秒div显示为红色，而设置none的话，前五秒会div会显示自己的背景色黑色）