Skip to content
Related Articles

Related Articles

HTML | DOM Style animationTimingFunction Property

View Discussion
Improve Article
Save Article
  • Last Updated : 10 Jun, 2022

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;

Return Values: It returns a String that represents the animation-timing-function property of an element
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) 

html




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

html




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

html




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

html




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

html




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

html




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

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 and above
  • Edge 12.0 and above
  • Firefox 16.0 and above
  • Internet Explorer 10.0 and above
  • Safari 9.0 and above
  • Opera 30.0 and above

My Personal Notes arrow_drop_up
Recommended Articles
Page :

Start Your Coding Journey Now!