HTML | DOM 样式 animationFillMode 属性

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

句法：

• 要返回 animationFillMode 属性，请使用以下内容：

  object.style.animationFillMode;
  

• 要设置 animationFillMode 属性，请使用以下内容：

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

属性值：

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

方法：

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

示例 1：

  

    
        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;
            }
        }
    

  

  
    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.
    
    Try it
  
    
        function myFunction() {
            
            // Code for Chrome, Safari, and Opera
            document.getElementById(
              "div1").style.WebkitAnimationFillMode = 
              "backwards"; 
            
            document.getElementById(
              "div1").style.animationFillMode = 
              "backwards";
        }
    
  
    
  

  

输出：

示例 2：

  

    
        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;
            }
        }
    

  

  
    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.
  
    
    
      Try it
    
  
    
        function myFunction() {
            
            // Code for Chrome, Safari, and Opera
            document.getElementById(
              "div1").style.WebkitAnimationFillMode =
              "forwards"; 
            
            document.getElementById(
              "div1").style.animationFillMode = 
              "forwards";
        }
    
  
    
  

  

输出：

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

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