animation-timing-function property is used to specify how a CSS animation should progress over the duration of each cycle. The timing function is not applied over the entire animation but on individual animation cycles.
The initial value of
animation-timing-function property is
ease. You can apply it to all elements as well as
::after pseudo-elements. This property is not inheritable.
This property takes a timing function as a value, which specifies the speed of the object being animated over the duration of animation. Instead of a timing function, you can also use one of the several predefined keywords for common timing functions.
This is the formal syntax for using
animation-timing-function property —
Here are some examples of using this property —
/* Keyword values */ animation-timing-function: ease; animation-timing-function: ease-in; animation-timing-function: ease-out; animation-timing-function: ease-in-out; animation-timing-function: linear; animation-timing-function: step-start; animation-timing-function: step-end; /* Function values */ animation-timing-function: cubic-bezier(0.15, 0.60, 1.0, 0.30); animation-timing-function: steps(8, end); /* Multiple animations */ animation-timing-function: ease, linear, ease-out;
The <timing-function> specified here will be used to determine how the animation progresses over time.
In the following example, you can stop the circle by hovering over it because its
animation-play-state value will be set to
paused on hover.
animation-timing-function property is fully supported in 93.99% browsers.
This property is partially supported in Android 3+ and fully supported in IE 10+, Edge 12+, Firefox 16+, Chrome 43+, Safari 9+, Opera 30+, iOS Safari 9.0-9.2+, Android 53+ and Chrome for Android 55+.
The browser stats were taken from caniuse.com
2. As a registered user, you will also get to access features like choosing between a light and dark theme or anything else that we might implement in future.