CSS3 动画事件

                                 css3动画事件                      

css3中增加了大量跟图形动画属性，肯定对对应这种动画会有相应的事件让开发者使用，动画我们讲了主要有两种 过渡动画和关键帧动画transition ，animate

transition

transitionend

oTransitionend

webkitTransitionEnd

不同浏览器下的写法，也就是过渡完成以后触发的事件，这是过渡对应的唯一事件，你可能会问为什么没有transitionstart ，这个问题我也想知道，看了一下国外资料

                                             What about transition start?

  Unfortunately there is no transition start event and it might at first seem like this is not much of a problem. A css transition is usually triggered by an event such as resize or hover and these events can be captured with JavaScript. But that is not always the case, at times it is difficult if not impossible to tell when a particular transition is triggered.

答案你知道了吧，因为开始是可以控制的通常你是在事件中触发的，但是还是有结束没有开始感觉还是好奇怪

 

 

animate

 

animatestart

   关键帧动画开始的事件

animateend

   关键帧动画借宿事件

animateiteration

   关键帧动画迭代事件

 

 

 

下边是不同浏览器的事件名称

Browser Compatibility

At the time of writing, Firefox, Chrome, Safari, Opera and IE10 support CSS3 animation and the associated event handlers. In addition, Opera, IE10 and the webkit browsers use prefixes and throw in a few case changes for good measure…

W3C standard	Firefox	webkit	Opera	IE10
animationstart	animationstart	webkitAnimationStart	oanimationstart	MSAnimationStart
animationiteration	animationiteration	webkitAnimationIteration	oanimationiteration	MSAnimationIteration
animationend	animationend	webkitAnimationEnd	oanimationend	MSAnimationEnd

The easiest way around the prefix shenanigans is to call addEventListener for all prefixed and non-prefixed names using a custom function: