6、animation-iteration-count
animation-iteration-count:infinite || number
animation-iteration-count是指定元素播放动画的循环次数，其取值为数字，默认值为“1”或者infinite(无限次数循环)。
7、animation-direction
animation-direction: normal || alternate
animation-direction是指定元素动画播放的方向，如果是normal，那么动画的每次循环都是向前播放;如果是alternate，那么动画播放在第偶数次向前播放，第奇数次向反方向播放。
8、animation-play-state
animation-play-state:running || paused
animation-play-state主要是用来控制元素动画的播放状态。其主要有两个值，running和paused，其中running为默认值。这个属性目前很少内核支持，所以只是稍微提一下。
二、animation事件接口
其实目前基本的就是三个事件而已：开始、迭代、结束。开始和结束都知道是什么意思。至于这个迭代，由于animation中有个iteration-count属性，它可以定义动画重复的次数，因此动画会有许多次开始和结束。但是真正的“开始”和“结束”事件是关于整个动画的，他们只会触发一次，而中间由于重复动画引起的“结束并开始下一次”将触发整个“迭代”事件。
这三个事件的标准名称是：
开始：animationstart
迭代：animationiteration
结束：animationend
但是目前版本的Chrome需要加上webkit前缀，而且还要注意大小写
开始：webkitAnimationStart
迭代：webkitAnimationIteration
结束：webkitAnimationEnd
最后是实例代码和截图
CSS Code复制内容到剪贴板
<style>
@-webkit-keyframes test {
0% {background:red;}
25% {background:green;}
50% {background:blue;}
100% {background:red;}
}
@keyframes test {
0% {background:red;}
25% {background:green;}
50% {background:blue;}
100% {background:red;}
}
</style>
<script>
onload=function(){
var html=document.documentElement;
//定义事件回调函数
var start=function(){
console.log("start");
},iteration=function(e){
