HTML Style transitionTimingFunction用法及代碼示例

DOM樣式transitionTimingFunction屬性允許過渡效果在其持續時間內更改速度。過渡效果提供了一種在更改屬性時控製動畫速度的方法。

用法:

設置屬性：

object.style.transitionTimingFunction = "ease|linear|ease-in|
ease-out|ease-in-out"

要獲得該屬性：
```
object.style.transitionTimingFunction
```

屬性值：

ease:指定過渡效果，該效果先緩慢然後快速然後緩慢。
linear:從開始到結束以相同的速度指定過渡效果。
ease-in：指定啟動緩慢的過渡效果。
ease-out：指定具有慢端的過渡效果。
ease-in-out：指定具有緩慢開始和結束的過渡效果。

範例1：本示例描述線性屬性值。

<!DOCTYPE html> 
<html> 
      
<head>  
    <title> 
        HTML | DOM Style transitionTimingFunction property 
    </title> 
    <style>  
      
        #GFG { 
          background-color:green; 
          width:150px; 
          height:150px; 
          overflow:auto; 
            
          /* For Safari Browser */ 
          -webkit-transition:all 2s; 
          transition:all 2s; 
        } 
          
        #GFG:hover { 
          width:300px; 
          height:300px; 
        } 
    </style> 
</head> 
  
<body> 
      
    <button onclick = "myGeeks()"> 
        Click Here! 
    </button> 
      
    <br><br> 
      
    <div id = "GFG"> 
    </div> 
      
    <script> 
    function myGeeks() { 
          
        /* For Safari Browser */ 
        document.getElementById("GFG").style.WebkitTransitionTimingFunction 
                = "linear"; 
        document.getElementById("GFG").style.transitionTimingFunction 
                = "linear";  
    } 
    </script> 
  
</body> 
  
</html>

輸出：

範例2：本示例描述ease-in屬性值。

<!DOCTYPE html> 
<html> 
      
<head> 
    <title> 
        HTML | DOM Style transitionTimingFunction property 
    </title> 
    <style>  
      
        #GFG { 
          background-color:green; 
          width:150px; 
          height:150px; 
          overflow:auto; 
            
          /* For Safari Browser */ 
          -webkit-transition:all 2s; 
          transition:all 2s; 
        } 
          
        #GFG:hover { 
          width:300px; 
          height:300px; 
        } 
    </style> 
</head> 
  
<body> 
      
    <button onclick = "myGeeks()"> 
        Click Here! 
    </button> 
      
    <br><br> 
      
    <div id = "GFG"> 
    </div> 
      
    <script> 
    function myGeeks() { 
          
        /* For Safari Browser */ 
        document.getElementById("GFG").style.WebkitTransitionTimingFunction 
                = "ease-in"; 
        document.getElementById("GFG").style.transitionTimingFunction 
                = "ease-in";  
    } 
    </script> 
  
</body> 
  
</html>

輸出：

注意：使用WebkitTransitionTimingFunction作為Safari瀏覽器中的關鍵字。

支持的瀏覽器：HTML | DOM樣式的transitionTimingFunction屬性如下所示：

穀歌瀏覽器26.0
Internet Explorer 10.0
Mozilla Firefox 16.0
Opera 12.1
Safari 6.1、3.1 WebkitTransitionTimingFunction

相關用法

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