JavaScript HTML DOM animationiteration 事件

• 

  animationiteration 事件

  重复CSS动画时会发生animationiteration事件。如果CSS animation-iteration-count属性设置为“1”，意味着动画将仅播放一次，则不会发生animationiteration事件。为了触发此事件，动画需要多次运行。有关CSS动画的更多信息，请参阅我们的CSS3动画教程 。播放CSS动画时，可能会发生三种事件：

  1. animationstart - 在CSS动画开始时发生
  2. animationiteration - 在重复CSS动画时发生
  3. animationend - 在CSS动画完成时发生

  重复CSS动画时，使用<div>元素执行某些操作：

  var x = document.getElementById("myDIV");
  
  // Chrome, Safari and Opera
  x.addEventListener("webkitAnimationIteration", myRepeatFunction);
  
  // 标准语法
  x.addEventListener("animationiteration", myRepeatFunction);
  

  尝试一下
• 

  浏览器支持

  项	IE/Edge	Chrome	FireFox	Safari	Opera
  事件
  animationiteration	10.0+	4.0 webkit	16.0 5.0 moz	4.0 webkit	15.0 webkit 12.1

  注意：对于Chrome，Safari和Opera，请使用webkitanimationiteration前缀。
• 

  语法

  object.addEventListener( "webkitAnimationIteration", myScript ); // Chrome, Safari and Opera

  ---

  object.addEventListener( "animationiteration", myScript ); // 标准语法

  注意:在Internet Explorer 8和更早版本不支持使用addEventListener()方法。
• 

  技术细节

  项目	描述
  冒泡：	有
  取消：	没有
  事件类型：	AnimationEvent
  DOM版本	DOM Event Level 3

• 

  相关页面

  CSS教程：CSS3动画

  CSS参考：CSS3 animation 属性

  CSS参考：CSS3 animation-iteration-count属性