HTML | DOM 样式 transitionTimingFunction 属性

DOM 样式 transitionTimingFunction属性允许过渡效果在其持续时间内改变速度。过渡效果提供了一种在更改属性时控制动画速度的方法。

句法：

要设置属性：

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

获取属性：

object.style.transitionTimingFunction

属性值：

• 缓动：指定开始缓慢，然后快速，然后缓慢的过渡效果。
• 线性：指定从开始到结束的速度相同的过渡效果。
• 缓入：指定缓慢启动的过渡效果。
• 缓出：指定缓慢结束的过渡效果。
• 缓入缓出：指定缓慢开始和结束的过渡效果。

示例 1：此示例描述了线性属性值。

      
 
    
        HTML | DOM Style transitionTimingFunction property
    
     
      
        #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;
        }
    

  

      
    
        Click Here!
    
      
    
      
    
    
      
    
    function myGeeks() {
          
        /* For Safari Browser */
        document.getElementById("GFG").style.WebkitTransitionTimingFunction
                = "linear";
        document.getElementById("GFG").style.transitionTimingFunction
                = "linear"; 
    }
    
  

  

输出：

示例 2：此示例描述了缓入属性值。

      

    
        HTML | DOM Style transitionTimingFunction property
    
     
      
        #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;
        }
    

  

      
    
        Click Here!
    
      
    
      
    
    
      
    
    function myGeeks() {
          
        /* For Safari Browser */
        document.getElementById("GFG").style.WebkitTransitionTimingFunction
                = "ease-in";
        document.getElementById("GFG").style.transitionTimingFunction
                = "ease-in"; 
    }
    
  

  

输出：

注意：在 safari 浏览器中使用 WebkitTransitionTimingFunction 作为关键字。

支持的浏览器： HTML支持的浏览器 | DOM 样式 transitionTimingFunction 属性如下所示：

• 谷歌浏览器 26.0
• 浏览器 10.0
• Mozilla 火狐 16.0
• 歌剧 12.1
• Safari 6.1、3.1 WebkitTransitionTimingFunction