css 执行动画时切换内容

animation执行过程中各个回调：

（谷歌浏览器动画）
1.webkitAnimationStart :动画开始执行时的函数回调
2.webkitAnimationEnd ：动画执行结束的函数回调
3.webkitAnimationIteration ：动画循环执行过程中完成一次循环后的函数回调
（通用动画）
1.animationstart:动画开始执行时的函数回调
2.animationend：动画执行结束的函数回调
3.animationiteration ：动画循环执行过程中完成一次循环后的函数回调

动画执行完成时执行指定函数行为：

第一种方法（不推荐----settimeout可能存在延时导致毫秒级的误差）：
用计时器，设定一个和动画时长一样的time，过time事件去执行这个函数。
setTimeout(function(){ },time);

第二种方法：
当-webkit-animation动画结束时有一个webkitAnimationEnd事件，只要监听这个事件就可以了。

不同浏览器的AnimationEnd写法 (webkitAnimationEnd mozAnimationEnd MSAnimationEnd oanimationend animationend)

动画循环执行时每循环一次动画，执行一次指定函数：

第一种：(不推荐—同settimeout有延时误差)
计时器,设定一个和动画时长一样的time，过time事件去执行这个函数。
setInterval（function(){},time）;

第二种：

webkitAnimationIteration 监听此函数回调执行事件
document.getElementById(‘id’).addEventListener(‘webkitAnimationIteration’,function(){},false)

注意：
需要用到removeEventListener时需要定义指定函数
example：
定义需要执行的函数：
function a(){};
添加监听事件：
document.getElementById(‘id’).addEventListener(‘webkitAnimationIteration’,a,false)
移除监听事件：
document.getElementById(‘id’).removeEventListener(‘webkitAnimationIteration’,a)