当前位置: 首页>>代码示例>>用法及示例精选>>正文


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。非经特殊声明,原始代码版权归原作者所有,本译文的传播和使用请遵循“署名-相同方式共享 4.0 国际 (CC BY-SA 4.0)”协议。