The animationTimingFunction is used to specify the way animation progresses during its cycle. It does so by setting or returning the speed curve for an animation. The speed curve defines how smooth the transitions will be by specifying the time it takes animation to move from one state to another.
Syntax
Following is the syntax for −
Setting the animationTimingFunction property −
object.style.animationTimingFunction = "linear|ease|ease-in|ease-out|cubic-bezier(n, n, n, n)|initial|inherit"
Values
Following are the values −
| Sr.No | Values & Description |
|---|---|
| 1 | linear This specifies that the animation has the same speed throughout the course of an animation. |
| 2 | ease This is the default value specifying the animation has a slow start and end but is faster in the middle. |
| 3 | ease-in The animation has a slow start. |
| 4 | ease-out The animation has a slow end. |
| 5 | ease-in-out The animation is slow at the start and also slow at the end. |
| 6 | cubic-bezier(n, n, n,n) Fo defining the cubic-bezier function for your custom values. |
| 7 | initial For setting this property to initial value. |
| 8 | inherit To inherit the parent property value. |
Example
Let us look at the example for the animationTimingFunction property −
<!DOCTYPE html>
<html>
<head>
<style>
#PARA1{
border: 2px solid black;
position: relative;
animation: demo 5s infinite;
animation-timing-function: linear;
}
@keyframes demo {
from {background-color: lightcoral; color:black;}
to {background-color: indigo; color:white;}
}
</style>
<script>
function timingChange(){
document.getElementById("PARA1").style.animationTimingFunction="ease";
document.getElementById("Sample").innerHTML="The animation timing is now set to ease.";
}
</script>
</head>
<body>
<p id="PARA1">
Lacus vel facilisis volutpat est velit. Id interdum velit laoreet id donec ultrices.
Praesent semper feugiat nibh sed pulvinar proin gravida hendrerit. Viverra nibh cras
pulvinar mattis nunc sed blandit libero.</p>
<p>Click the below button to change the above animation name</p>
<button onclick="timingChange()">CHANGE TIMING</button>
<p id="Sample"></p>
</body>
</html>Output
This will produce the following output −
On clicking the CHANGE TIMING button −
