JavaScript HTML DOM animationend 事件

• 

  animationend 事件

  CSS动画完成后会发生animationend事件。有关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("webkitAnimationEnd", myEndFunction);
  
  // 标准 syntax
  x.addEventListener("animationend", myEndFunction);
  

  尝试一下
• 

  浏览器支持

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

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

  语法

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

  ---

  object.addEventListener("animationend", myScript); // 标准 syntax

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

  技术细节

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

• 

  相关页面

  CSS教程：CSS3动画

  CSS参考：CSS3 animation 属性