Skip to content
Related Articles

Related Articles

HTML | DOM Style animationTimingFunction Property
  • Last Updated : 29 Jul, 2019

The Style animationTimingFunction property in HTML DOM defines the time of transition between the styles to make transitions smooth. It specifies the speed curve of an animation.

Syntax:

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

Property Values:

  • cubic-bezier(n1, n2, n3, n4): Animation timings are specified using the cubic bezier function. The value of n1, n2, n3 and n4 lies between 0 to 1.
  • linear: The animation plays with the same speed from start to end.
  • ease: The animation starts slowly, then fast, and then finally ends slowly. It is the default value.
  • ease-in: If this value is specified then the animation begins with a slow start.
  • ease-out: The animation plays normally but ends slowly. This is similar to ease-in.
  • ease-in-out: The animation both starts and ends slowly.
  • initial: It sets the animationTimingFunction property to its default value.
  • inherit: The animationTimingFunction property inherited from its parent element.

Example: 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>                    


Output:



  • Before Click on the button:
    animation-timing before gfg
  • After Click on the button:
    cubic-bezier gfg

Example: linear




<!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>                    


Output:

  • Before Click on the button:
    animation-timing before gfg
  • After Click on the button:
    linear gfg

Example: ease




<!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>                    


Output:

  • Before Click on the button:
    animation-timing before gfg
  • After Click on the button:
    ease gfg

Example: 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>                    


Output:

  • Before Click on the button:
    animation-timing before gfg
  • After Click on the button:
    ease-in gfg

Example: 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>                    


Output:

  • Before Click on the button:
    animation-timing before gfg
  • After Click on the button:
    ease-out gfg

Example: 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>                    


Output:

  • Before Click on the buttin:
    animation-timing before gfg
  • After Click on the button:
    ease-in-out gfg

Supported Browsers: The browser supported by DOM style animationTimingFunction property are listed below:

  • Chrome 43.0
  • Firefox 16.0, 5.0 -moz-
  • Safari 9.0
  • Opera 30

full-stack-img

My Personal Notes arrow_drop_up
Recommended Articles
Page :