We use cookies to improve your experience. Learn more in our Privacy policy.
animation-timing-function
Allows you to time your animations. The CSS property determines how an animation progresses through each cycle's duration.
Example
| Initial value | ease |
| Applies to | all elements in the page |
Syntax
animation-timing-function: ease-out;
Values
Increases in speed until the middle of the animation, and slows down towards the end. Equals to cubic-bezier(0.25, 0.1, 0.25, 1.0).
Animates at a steady speed. Equals to cubic-bezier(0.0, 0.0, 1.0, 1.0).
Animation starts slowly, with the speed of the transition of the animating property increasing until the end of animation. Equals to cubic-bezier(0.42, 0, 1.0, 1.0).
Animation starts quickly, slows down towards the end of animation. Equals to cubic-bezier(0, 0, 0.58, 1.0).
Speeds up in the beginning and slows down towards the end of animation. Equals to cubic-bezier(0.42, 0, 0.58, 1.0)
Based on a cubic bezier curve function.
Browser support
| animation-timing-function | 1 | 1 | 3.5 | 1 | 12 | 3 |