HTML | DOM Style animationTimingFunction Property

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)

filter_none

edit
close

play_arrow

link
brightness_4
code

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

chevron_right


Output:

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

Example: linear

filter_none

edit
close

play_arrow

link
brightness_4
code

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

chevron_right


Output:

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

Example: ease

filter_none

edit
close

play_arrow

link
brightness_4
code

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

chevron_right


Output:

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

Example: ease-in

filter_none

edit
close

play_arrow

link
brightness_4
code

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

chevron_right


Output:

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

Example: ease-out

filter_none

edit
close

play_arrow

link
brightness_4
code

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

chevron_right


Output:

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

Example: ease-in-out

filter_none

edit
close

play_arrow

link
brightness_4
code

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

chevron_right


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


My Personal Notes arrow_drop_up

Computer Engineering student at St Francis Institute of Technology with good programming and problem-solving skills Passionate about solving real world problems through technology and implementing innovative ideas Looking to secure a responsible career opportunity to utilize my training and skills,

If you like GeeksforGeeks and would like to contribute, you can also write an article using contribute.geeksforgeeks.org or mail your article to contribute@geeksforgeeks.org. See your article appearing on the GeeksforGeeks main page and help other Geeks.

Please Improve this article if you find anything incorrect by clicking on the "Improve Article" button below.




Article Tags :
Practice Tags :


Be the First to upvote.


Please write to us at contribute@geeksforgeeks.org to report any issue with the above content.