css3设置动画不循环播放,不一样的css3之Animation

transition通过事件来触发动画效果，所以它本身就存在很多局限性。如果我希望动画效果能够自动执行怎么办？这就需要 用到css3的另一个重要 的属性——animation

### 关键帧

说到animation就不得不说一下关键帧(keyframes)，它指定了动画在不同时间段的样式。

~~~

@keyframes around{

0%{transform:translateX(0);}

25%{transform:translateX(180px);}

50%{transform:translate(180px,180px);}

75%{transform:translate(0,180px);}

100%{transform:translateY(0)}

}

~~~

上述代码创建了一个名字为around的关键帧，它指定了动画(时间)在

0%，25%，50%，75%，100%的位置分别为左上，右上，右下，左下，左上(假设div的宽高为180px)。

### animation

#### 调用动画——animation：关键帧的动画名称

#### animation-duration：设置动画完成时间

单位：秒或毫秒

#### animation-timing-function：过渡函数

参数同transition-timing-function

#### animation-delay：延迟时间

单位：秒或毫秒

#### animation-iteraction-count：指定动画的播放次数(默认播放一次)

1.n：播放n次

2.infinite：播放无限次

#### animation-direction：指定播放方向

1.normal：默认值，每次循环都是正序播放

2.alternate：偶数次循环使反方向播放

#### animation-fill-mode：指定动画的开始、结束样式

1.none：默认动画结束后返回到0%帧的样式

2.forwards：动画结束后停留在最后的帧的样式

3.backwards：在准备执行动画之前让元素迅速应用动画初始帧的样式

(比如元素透明度为1，0%的样式为透明度为0，在开始动画之前元素的透明度已经是0了，否则就会出现先变为0后开始执行动画的情况)

4.both：forwards+backwards

animation的前四个属性是必须的。

也可以把这些属性写到一起

~~~

div span{

display:inline-block;

width:20px;

height:20px;

background:red;

border-radius:10px;

animation:around 10s ease 1s infinite backwards;

}

~~~

最终的动画效果：小球从左上角由快到慢到达右上角，再由快到慢到达右下角，再由快到慢到达左下角，最后回到原点并且一直循环下去。

过渡函数会作用的每一帧上，也就是每一帧到达下一帧的动画都是由快到慢。

animation和@keyframes也要写css hack，关键帧的前缀写在@和keyframes之间：@-webkit-keyframes{...}