HTML Style animationFillMode用法及代码示例

DOM样式animationFillMode属性用于在不播放动画或动画结束时或动画延迟时指定元素的样式。 animationFillMode属性可以覆盖CSS动画的默认行为，当第一个关键帧为“played”时，CSS动画会通过该默认行为来影响元素，并在最后一个关键帧完成后停止影响该元素。

用法:

要返回animationFillMode属性，请使用以下命令：
```
object.style.animationFillMode;
```

要设置animationFillMode属性，请使用以下命令：

object.style.animationFillMode = "none|forwards|backwards|both|
initial|inherit";

属性值：

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

方法：
<div>元素获取动画延迟期间动画开始之前由第一个关键帧设置的样式值。

示例1：

<!DOCTYPE html> 
<html> 
  
<head> 
    <style> 
        div { 
            width:50px; 
            height:50px; 
            background:green; 
            position:relative; 
            -webkit-animation:animate 2s 1; 
            /* Chrome, Safari, Opera */ 
            animation:animate 2s 2; 
        } 
        /* Chrome, Safari, Opera */ 
          
        @-webkit-keyframes animate { 
            from { 
                left:500px; 
            } 
            to { 
                left:0px; 
            } 
        } 
          
        @keyframes animate { 
            from { 
                left:500px; 
            } 
            to { 
                left:0px; 
            } 
        } 
    </style> 
</head> 
  
<body> 
  
    <p>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.</p> 
    
    <button onclick="myFunction()">Try it</button> 
  
    <script> 
        function myFunction() { 
            
            // Code for Chrome, Safari, and Opera 
            document.getElementById( 
              "div1").style.WebkitAnimationFillMode =  
              "backwards";  
            
            document.getElementById( 
              "div1").style.animationFillMode =  
              "backwards"; 
        } 
    </script> 
  
    <div id="div1"></div> 
  
</body> 
  
</html>

输出：

示例2：

<!DOCTYPE html> 
<html> 
  
<head> 
    <style> 
        div { 
            width:50px; 
            height:50px; 
            background:green; 
            position:relative; 
            -webkit-animation:animate 2s 1; 
            /* Chrome, Safari, Opera */ 
            animation:animate 2s 2; 
        } 
        /* Chrome, Safari, Opera */ 
          
        @-webkit-keyframes animate { 
            from { 
                left:0px; 
            } 
            to { 
                left:500px; 
            } 
        } 
          
        @keyframes animate { 
            from { 
                left:0px; 
            } 
            to { 
                left:500px; 
            } 
        } 
    </style> 
</head> 
  
<body> 
  
    <p>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. 
  </p> 
    
    <button onclick="myFunction()"> 
      Try it 
    </button> 
  
    <script> 
        function myFunction() { 
            
            // Code for Chrome, Safari, and Opera 
            document.getElementById( 
              "div1").style.WebkitAnimationFillMode = 
              "forwards";  
            
            document.getElementById( 
              "div1").style.animationFillMode =  
              "forwards"; 
        } 
    </script> 
  
    <div id="div1"></div> 
  
</body> 
  
</html>

输出：

支持的浏览器：animationFillMode属性支持的浏览器如下所示：

谷歌浏览器43.0
Firefox 16.0
Opera 30.0

相关用法

注：本文由纯净天空筛选整理自chaitanyashah707大神的英文原创作品 HTML | DOM Style animationFillMode Property。非经特殊声明，原始代码版权归原作者所有，本译文未经允许或授权，请勿转载或复制。