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。非经特殊声明，原始代码版权归原作者所有，本译文未经允许或授权，请勿转载或复制。