📜  HTML | DOM 样式 animationFillMode 属性

📅  最后修改于: 2021-11-07 08:32:52             🧑  作者: Mango

DOM 样式 animationFillMode属性用于指定动画未播放或动画完成或动画延迟时元素的样式。
animationFillMode属性可以覆盖 CSS 动画的默认行为,当第一个关键帧“播放”时,CSS 动画会影响元素,然后在最后一个关键帧完成后停止影响元素。

句法:

  • 要返回 animationFillMode 属性,请使用以下内容:
    object.style.animationFillMode;
    
  • 要设置 animationFillMode 属性,请使用以下内容:
    object.style.animationFillMode = "none|forwards|backwards|both|
    initial|inherit";
    

属性值:

  • none:在执行之前或之后不会对目标应用任何样式。
  • forwards:它将应用动画结束时间的属性值。
  • 向后:它将应用关键帧中定义的属性值,该值将在动画延迟定义的时间段内开始动画的第一次迭代。
  • both:它将向前和向后应用属性值到动画。
  • 初始:它将属性设置为其默认值。
  • 继承:此属性是从其父级继承的。

方法:

元素在动画延迟期间获取动画开始前的第一个关键帧设置的样式值。

示例 1:



  

    

  

  
    

Click the "Try it" button to let the        DIV element keep the styles set by the        last keyframe: to {left:0px;}, when       the animation is finished.

                         
     

输出:

示例 2:



  

    

  

  
    

Click the "Try it" button to let the        DIV element keep the styles set by the        last keyframe: to {left:500px;}, when        the animation is finished.   

                         
     

输出:

支持的浏览器: animationFillMode 属性支持的浏览器如下:

  • 谷歌浏览器 43.0
  • 火狐 16.0
  • 歌剧 30.0