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：指定播放⽅向
2.alternate：偶数次循环使反⽅向播放
#### animation-fill-mode：指定动画的开始、结束样式
<：默认动画结束后返回到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;
js控制css3动画触发animation:around 10s ease 1s infinite backwards;
}
~~~
最终的动画效果：⼩球从左上⾓由快到慢到达右上⾓，再由快到慢到达右下⾓，再由快到慢到达左下⾓，最后回到原点并且⼀直循环下去。过渡函数会作⽤的每⼀帧上，也就是每⼀帧到达下⼀帧的动画都是由快到慢。
animation和@keyframes也要写css hack，关键帧的前缀写在@和keyframes之间：@-webkit-keyframes{...}

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。