JavaScript HTML DOM animationstart 事件

• 

  animationstart 事件

  当CSS动画开始播放时，会发生animationstart事件。有关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("webkitAnimationStart", myStartFunction);
  
  // 标准语法
  x.addEventListener("animationstart", myStartFunction);
  

  尝试一下
• 

  浏览器支持

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

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

  语法

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

  ---

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

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

  技术细节

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

• 

  相关页面

  CSS教程：CSS3动画

  CSS参考：CSS3 animation 属性