CSS animation-timing-function property specifies how the speed of the element being animated will progress over one cycle of its duration.
The timing function basically controls the speed of the animated element at different points of time during the animation. CSS has already defined several such functions for this purpose and we can easily use them. See the example below:
Example:
.div1{
animation-timing-function: ease;
}
.div2{
animation-timing-function: steps(10);
}
CSS Syntax
The animation-timing-function property has the following syntax:
animation-timing-function: linear|ease|ease-in|ease-out|ease-in-out|steps(int,start|end)|step-start|step-end|cubic-bezier(p1,p2,p3,p4)|initial|inherit;
Property Values
The animation-timing-function property accepts the following values:
| linear | The speed of the element remains constant throughout the animation. |
| ease | Speed is low in starting, then it increases gradually and again decreases before it reaches the end. This is the default value. |
| ease-in | Speed is low at the starting and then it increases slowly. |
| ease-out | Speed decreases slowly before reaching the end. |
| ease-in-out | The element speeds up slowly and then again slows down before the end. |
| steps(int, start|end) | The animation grows in steps. The total duration is divided among each step equally. The first parameter is the total number of steps in one cycle. It must be a positive number. The second parameter is optional. It sets to end if not specified. |
| step-start | Same as steps(1, start) |
| step-end | Same as steps(1, end) |
| cubic-bazier(p1,p2,p3,p4) | Allow us to define our own timing curve. For example, ‘linear’ is the same as cubic-bazier(0, 0, 1, 1) and ‘ease’ is the same as cubic-bazier(0.25, 0.1, 0.25, 0.1). Similarly, we can define our own timing curve. |
| initial | Sets the animation-timing-function to its default value(ease). |
| inherit | Inherits the animation-timing-function property from the parent element. |
General Info
| Default Value | ease |
| Inherited | No |
| JavaScript Usage | element.style.animationTimingFunction = “steps(10)” |
