HTML

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)

<!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 = "Beginner">
        GfG
    </div>
     
    <button onclick = "myText()">
        Click to change speed
    </button>
     
    <script>
    function myText() {
    document.getElementById("Beginner").style.WebkitAnimationTimingFunction
            = "cubic-bezier(0.7,0.1,0.3,0.2)"; 
     
    document.getElementById("Beginner").style.animationTimingFunction
            = "cubic-bezier(0.7,0.1,0.3,0.2)";
    }
    </script>
</body>
 
</html>                    

Output:

Before Click on the button:

After Click on the button:

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 = "Beginner">
        GfG
    </div>
     
    <button onclick="myText()">
        Click to change speed
    </button>
     
    <script>
    function myText() {
    document.getElementById("Beginner").style.WebkitAnimationTimingFunction
            = "linear"; 
     
    document.getElementById("Beginner").style.animationTimingFunction
            = "linear";
    }
    </script>
</body>
 
</html>                    

Output:

Before Click on the button:

After Click on the button:

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 = "Beginner">
        GfG
    </div>
     
    <button onclick = "myText()">
        Click to change speed
    </button>
     
    <script>
    function myText() {
    document.getElementById("Beginner").style.WebkitAnimationTimingFunction
            = "ease"; 
     
    document.getElementById("Beginner").style.
            = "ease";
    }
    </script>
</body>
 
</html>                    

Output:

Before Click on the button:

After Click on the button:

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 = "Beginner">
        GfG
    </div>
     
    <button onclick = "myText()">
        Click to change speed
    </button>
     
    <script>
    function myText() {
    document.getElementById("Beginner").style.WebkitAnimationTimingFunction
            = "ease-in"; 
     
    document.getElementById("Beginner").style.animationTimingFunction
            = "ease-in";
    }
    </script>
</body>
 
</html>                    

Output:

Before Click on the button:

After Click on the button:

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 = "Beginner">
        GfG
    </div>
     
    <button onclick = "myText()">
        Click to change speed
    </button>
     
    <script>
    function myText() {
    document.getElementById("Beginner").style.WebkitAnimationTimingFunction
            = "ease-out"; 
     
    document.getElementById("Beginner").style.animationTimingFunction
            = "ease-out";
    }
    </script>
</body>
 
</html>                    

Output:

Before Click on the button:

After Click on the button:

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 = "Beginner">
        GfG
    </div>
     
    <button onclick = "myText()">
        Click to change speed
    </button>
     
    <script>
    function myText() {
    document.getElementById("Beginner").style.WebkitAnimationTimingFunction
            = "ease-in-out"; 
     
    document.getElementById("Beginner").style.animationTimingFunction
            = "ease-in-out";
    }
    </script>
</body>
 
</html>                    

Output:

Before Click on the button:

After Click on the button:

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

HTML | DOM Style animationTimingFunction Property

html

html

html

html

html

html

Contact Us