當前位置: 首頁>>代碼示例 >>用法及示例精選 >>正文


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。非經特殊聲明,原始代碼版權歸原作者所有,本譯文未經允許或授權,請勿轉載或複製。