HTML | DOM 样式 animationTimingFunction 属性

HTML DOM 中的 Style animationTimingFunction属性定义了样式之间的过渡时间以使过渡平滑。它指定动画的速度曲线。

句法：

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

属性值：

• cube-bezier(n1, n2, n3, n4)：使用三次贝塞尔函数指定动画时间。 n1、n2、n3 和 n4 的值介于 0 到 1 之间。
• 线性：动画从头到尾以相同的速度播放。
• 缓动：动画开始缓慢，然后快速，最后缓慢结束。它是默认值。
• 缓入：如果指定了此值，则动画以慢速开始。
• 缓出：动画正常播放但结束缓慢。这类似于缓入。
• 缓入缓出：动画开始和结束都很慢。
• initial：它将 animationTimingFunction 属性设置为其默认值。
• 继承：从其父元素继承的 animationTimingFunction 属性。

示例： cubic-bezier(n1, n2, n3, n4)

      

     
        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;}
        }
    

  

    
        GfG
    
      
    
        Click to change speed
    
      
    
    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)";
    }
    

  
                    

输出：

• 点击按钮前：
  
• 点击按钮后：
  

示例：线性

      

     
        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;}
        }
    

  

    
        GfG
    
      
    
        Click to change speed
    
      
    
    function myText() {
    document.getElementById("geeks").style.WebkitAnimationTimingFunction
            = "linear"; 
      
    document.getElementById("geeks").style.animationTimingFunction
            = "linear";
    }
    

  
                    

输出：

• 点击按钮前：
  
• 点击按钮后：
  

示例：轻松

      

     
        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;}
        }
    

  

    
        GfG
    
      
    
        Click to change speed
    
      
    
    function myText() {
    document.getElementById("geeks").style.WebkitAnimationTimingFunction
            = "ease"; 
      
    document.getElementById("geeks").style.
            = "ease";
    }
    

  
                    

输出：

• 点击按钮前：
  
• 点击按钮后：
  

示例：缓入

      

     
        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;}
        }
    

  

    
        GfG
    
      
    
        Click to change speed
    
      
    
    function myText() {
    document.getElementById("geeks").style.WebkitAnimationTimingFunction
            = "ease-in"; 
      
    document.getElementById("geeks").style.animationTimingFunction
            = "ease-in";
    }
    

  
                    

输出：

• 点击按钮前：
  
• 点击按钮后：
  

示例：缓出

      

     
        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;}
        }
    

  

    
        GfG
    
      
    
        Click to change speed
    
      
    
    function myText() {
    document.getElementById("geeks").style.WebkitAnimationTimingFunction
            = "ease-out"; 
      
    document.getElementById("geeks").style.animationTimingFunction
            = "ease-out";
    }
    

  
                    

输出：

• 点击按钮前：
  
• 点击按钮后：
  

示例：缓入缓出

      

     
        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;}
        }
    

  

    
        GfG
    
      
    
        Click to change speed
    
      
    
    function myText() {
    document.getElementById("geeks").style.WebkitAnimationTimingFunction
            = "ease-in-out"; 
      
    document.getElementById("geeks").style.animationTimingFunction
            = "ease-in-out";
    }
    

  
                    

输出：

• 在点击按钮之前：
  
• 点击按钮后：
  

支持的浏览器： DOM样式animationTimingFunction属性支持的浏览器如下：

• 铬 43.0
• 火狐 16.0, 5.0 -moz-
• Safari 9.0
• 歌剧 30