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

HTML Style animationTimingFunction用法及代碼示例


HTML DOM中的Style animationTimingFunction屬性定義了樣式之間的過渡時間，以使過渡平滑。它指定動畫的速度曲線。

用法: 

animation-timing-function:cubic-bezier(n1, n2, n3, n4)|linear
|ease|ease-in|ease-out|initial|inherit;

屬性值：


  • cubic-bezier(n1，n2，n3，n4)：動畫時間是使用三次方貝塞爾函數指定的。 n1，n2，n3和n4的值介於0到1之間。
  • linear:動畫從頭到尾以相同的速度播放。
  • ease:動畫開始緩慢，然後快速，然後最終結束。它是默認值。
  • ease-in：如果指定此值，則動畫將從慢速開始開始。
  • ease-out：動畫正常播放，但播放緩慢。這類似於ease-in。
  • ease-in-out：動畫緩慢地開始和結束。
  • initial:它將animationTimingFunction屬性設置為其默認值。
  • inherit:animationTimingFunction屬性是從其父元素繼承的。

例：cubic-bezier(n1，n2，n3，n4)

<!DOCTYPE html> 
<html> 
      
<head> 
    <style>  
        div { 
            font-size:50px; 
            color:darkgreen; 
            position:relative; 
            height:150px; 
            width:150px; 
            animation:movement 5s infinite; 
            -webkit-animation:movement 5s infinite;  
        } 
          
        @-webkit-keyframes movement { 
            from {left:50px;} 
            to {left:500px;} 
        } 
          
        @keyframes movement { 
            from {left:50px;} 
            to {left:500px;} 
        } 
    </style> 
</head> 
  
<body> 
    <div id = "geeks"> 
        GfG 
    </div> 
      
    <button onclick = "myText()"> 
        Click to change speed 
    </button> 
      
    <script> 
    function myText() { 
    document.getElementById("geeks").style.WebkitAnimationTimingFunction 
            = "cubic-bezier(0.7,0.1,0.3,0.2)";  
      
    document.getElementById("geeks").style.animationTimingFunction 
            = "cubic-bezier(0.7,0.1,0.3,0.2)"; 
    } 
    </script> 
</body> 
  
</html>                    

輸出：

  • 之前單擊按鈕：
    animation-timing before gfg
  • 單擊按鈕後：
    cubic-bezier gfg

例：線性的

<!DOCTYPE html> 
<html> 
      
<head> 
    <style>  
        div { 
            font-size:50px; 
            color:darkgreen; 
            position:relative; 
            height:150px; 
            width:150px; 
            animation:movement 5s infinite; 
            -webkit-animation:movement 5s infinite;  
        } 
          
        @-webkit-keyframes movement { 
            from {left:50px;} 
            to {left:500px;} 
        } 
          
        @keyframes movement { 
            from {left:50px;} 
            to {left:500px;} 
        } 
    </style> 
</head> 
  
<body> 
    <div id = "geeks"> 
        GfG 
    </div> 
      
    <button onclick="myText()"> 
        Click to change speed 
    </button> 
      
    <script> 
    function myText() { 
    document.getElementById("geeks").style.WebkitAnimationTimingFunction 
            = "linear";  
      
    document.getElementById("geeks").style.animationTimingFunction 
            = "linear"; 
    } 
    </script> 
</body> 
  
</html>                    

輸出：

  • 之前單擊按鈕：
    animation-timing before gfg
  • 單擊按鈕後：
    linear gfg

例：緩解

<!DOCTYPE html> 
<html> 
      
<head> 
    <style>  
        div { 
            font-size:50px; 
            color:darkgreen; 
            position:relative; 
            height:150px; 
            width:150px; 
            animation:movement 5s infinite; 
            -webkit-animation:movement 5s infinite;  
        } 
          
        @-webkit-keyframes movement { 
            from {left:50px;} 
            to {left:500px;} 
        } 
          
        @keyframes movement { 
            from {left:50px;} 
            to {left:500px;} 
        } 
    </style> 
</head> 
  
<body> 
    <div id = "geeks"> 
        GfG 
    </div> 
      
    <button onclick = "myText()"> 
        Click to change speed 
    </button> 
      
    <script> 
    function myText() { 
    document.getElementById("geeks").style.WebkitAnimationTimingFunction 
            = "ease";  
      
    document.getElementById("geeks").style. 
            = "ease"; 
    } 
    </script> 
</body> 
  
</html>                    

輸出：

  • 之前單擊按鈕：
    animation-timing before gfg
  • 單擊按鈕後：
    ease gfg

例：ease-in

<!DOCTYPE html> 
<html> 
      
<head> 
    <style>  
        div { 
            font-size:50px; 
            color:darkgreen; 
            position:relative; 
            height:150px; 
            width:150px; 
            animation:movement 5s infinite; 
            -webkit-animation:movement 5s infinite;  
        } 
          
        @-webkit-keyframes movement { 
            from {left:50px;} 
            to {left:500px;} 
        } 
          
        @keyframes movement { 
            from {left:50px;} 
            to {left:500px;} 
        } 
    </style> 
</head> 
  
<body> 
    <div id = "geeks"> 
        GfG 
    </div> 
      
    <button onclick = "myText()"> 
        Click to change speed 
    </button> 
      
    <script> 
    function myText() { 
    document.getElementById("geeks").style.WebkitAnimationTimingFunction 
            = "ease-in";  
      
    document.getElementById("geeks").style.animationTimingFunction 
            = "ease-in"; 
    } 
    </script> 
</body> 
  
</html>                    

輸出：

  • 之前單擊按鈕：
    animation-timing before gfg
  • 單擊按鈕後：
    ease-in gfg

例：ease-out

<!DOCTYPE html> 
<html> 
      
<head> 
    <style>  
        div { 
            font-size:50px; 
            color:darkgreen; 
            position:relative; 
            height:150px; 
            width:150px; 
            animation:movement 5s infinite; 
            -webkit-animation:movement 5s infinite;  
        } 
          
        @-webkit-keyframes movement { 
            from {left:50px;} 
            to {left:500px;} 
        } 
          
        @keyframes movement { 
            from {left:50px;} 
            to {left:500px;} 
        } 
    </style> 
</head> 
  
<body> 
    <div id = "geeks"> 
        GfG 
    </div> 
      
    <button onclick = "myText()"> 
        Click to change speed 
    </button> 
      
    <script> 
    function myText() { 
    document.getElementById("geeks").style.WebkitAnimationTimingFunction 
            = "ease-out";  
      
    document.getElementById("geeks").style.animationTimingFunction 
            = "ease-out"; 
    } 
    </script> 
</body> 
  
</html>                    

輸出：

  • 之前單擊按鈕：
    animation-timing before gfg
  • 單擊按鈕後：
    ease-out gfg

例：ease-in-out

<!DOCTYPE html> 
<html> 
      
<head> 
    <style>  
        div { 
            font-size:50px; 
            color:darkgreen; 
            position:relative; 
            height:150px; 
            width:150px; 
            animation:movement 5s infinite; 
            -webkit-animation:movement 5s infinite;  
        } 
          
        @-webkit-keyframes movement { 
            from {left:50px;} 
            to {left:500px;} 
        } 
          
        @keyframes movement { 
            from {left:50px;} 
            to {left:500px;} 
        } 
    </style> 
</head> 
  
<body> 
    <div id = "geeks"> 
        GfG 
    </div> 
      
    <button onclick = "myText()"> 
        Click to change speed 
    </button> 
      
    <script> 
    function myText() { 
    document.getElementById("geeks").style.WebkitAnimationTimingFunction 
            = "ease-in-out";  
      
    document.getElementById("geeks").style.animationTimingFunction 
            = "ease-in-out"; 
    } 
    </script> 
</body> 
  
</html>                    

輸出：

  • 在點擊按鈕之前：
    animation-timing before gfg
  • 單擊按鈕後：
    ease-in-out gfg

支持的瀏覽器：下麵列出了DOM樣式animationTimingFunction屬性支持的瀏覽器：

  • chrome 43.0
  • Firefox 16.0、5.0 -moz-
  • Safari 9.0
  • Opera 30


相關用法


注：本文由純淨天空篩選整理自roshalmoraes大神的英文原創作品 HTML | DOM Style animationTimingFunction Property。非經特殊聲明，原始代碼版權歸原作者所有，本譯文未經允許或授權，請勿轉載或複製。