CSS animation-timing-function Property

The 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 ::before and ::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.

Syntax

This is the formal syntax for using animation-timing-function property —

animation-timing-function: <single-timing-function>

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;  

Acceptable Values

<timing-function>

The <timing-function> specified here will be used to determine how the animation progresses over time.

Examples

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.

See the Pen CSS animation-timing-function Property by Tutorialio (@tutorialio) on CodePen.

Browser Support

The CSS 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

Reader Comments

1. You can register or login to post a comment. Asking readers to register improves the quality of discussion.

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.

Follow Us For Updates

FacebookTwitterGoogle+
Go To Top