最近项目有需求要做一个H5的页面，涉及到CSS3 animation的使用。这里做了一个项目中的总结。

• animation 基本用法

animation : [name] [keeping-time] [animate-function] [delay] [times] [iteration] [final]

• 第一个参数：name (animation-name)

定义动画的名字，CSS3定义采用" 关键帧[keyframes] "来定义动画

@keyframes fadeOut{    0% { opacity : 1}    100% { opacity : 0}}

对应不同的浏览器需要加前缀做兼容。

以上代码的意义：定义了一个动画名字叫fadeOut，0%代表动画初，100%代表动画末。中间的动画过程由浏览器渲染引擎进行渲染。其中可以使用的时间段0%~100%,或者通过关键词 "from" 和 "to"，等价于 0% 和 100%。

• 第二个参数：keeping-time (animation-duration)

整个动画持续的时间，必须带时间单位，s或者ms

• 第三个参数：animate-function (animation-timing-function)

运动方式的贝塞尔曲线，基本值

linear       // 动画从头到尾的速度是相同的。ease        // 默认。动画以低速开始，然后加快，在结束前变慢。 ease-in      // 动画以低速开始。ease-out     // 动画以低速结束。ease-in-out  // 动画以低速开始和结束。cubic-bezier(n,n,n,n)// 在 cubic-bezier 函数中自己的值。可能的值是从 0 到 1 的数值。

• 第四个参数：delay (animation-delay)

动画延迟执行的时间，单位也是s或者ms。

• 第五个参数：times (animation-iteration-count)：

动画循环执行的次数，无单位，infinite为无限循环。

• 第六个参数：iteration (animation-direction)

如果动画循环，循环的方式是：alternate(偶数次向前播放，奇数次向后播放)、normal(每次都向前播放)。

• 第七个参数：final (animation-fill-mode)：

动画的最后（达到100%）时的状态，取值有：backwards（回到初始状态）、forwards（停在最终状态）、none、both。

---

both详解：(根据animation-direction决定)

当设置方向为反方向的时候，根据动画执行的次数判断小球是否处于backwards还是forwards的状态，以上代码是执行偶数次，动画来回运动，最终回到初始状态极为backwards状态，当为奇数次时，则为结束状态forwards状态

.center{    border: 1px solid #332;    width: 60px;    height: 60px;    border-radius: 60px;    background: rgba(0,0,0,0.5);    -webkit-animation:ani 1s ease-in 2 alternate both;}@-webkit-keyframes ani{    0%{-webkit-transform:translateX(0);}    50%{-webkit-transform:translateX(40px);}    100%{-webkit-transform:translateX(100px);}}
    

• animation可以设置多组动画

.hr-3{    -webkit-animation: zoomInUpHr 2s linear 19s 1 forwards, zoomOutUpHr 1s linear 25s 1 forwards;}// 1、动画延迟19s进入zoomInUpHr动画(动画匀速播放持续2s)，播放一次后将停止在zoomInUpHr最终的状态。2、动画延迟25s进入zoomOutUpHr动画(动画匀速播放持续2s)，播放一次后将停止在zoomOutUpHr最终的状态