Changing the animationTimingFunction property of a <div> element:
document.getElementById("myDIV").style.animationTimingFunction = "linear";
Click the button to change the timing-function of the animation:
<!DOCTYPE html> <html> <head> <style> div {// ww w .j a v a2s . c om width: 100px; height: 100px; background: red; position: relative; animation: mymove 2s infinite; } @keyframes mymove { from {left: 0px;} to {left: 200px;} } </style> </head> <body> <button onclick="myFunction()">Test</button> <script> function myFunction() { document.getElementById("myDIV").style.animationTimingFunction = "linear"; } </script> <div id="myDIV"></div> </body> </html>
The animationTimingFunction specifies the speed curve of the animation.
The speed curve defines how values of an animation is changing.
The speed curve is used to make the changes smoothly.
Property Values
| Value | Description |
|---|---|
| linear | The animation has the same speed from start to end |
| ease | Default. The animation has a slow start, then fast, before it ends slowly |
| ease-in | a slow start |
| ease-out | a slow end |
| ease-in-out | both a slow start and a slow end |
| cubic-bezier(n, n, n, n) | Define your own values in the cubic-bezier function Possible values are numeric values from 0 to 1 |
| initial | Sets this property to its default value. |
| inherit | Inherits this property from its parent element. |
The animationTimingFunction returns a String representing the animation-timing-function property of an element.