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 属性