CSS animation-delay Property

The animation-delay property is used to specify when a given animation should start. It allows an animation to begin execution some time after it is applied, or to appear to have begun execution some time before it is applied.

The default value of this property is 0s which starts the animation as soon as it’s applied. This property accepts both positive and negative values. A positive time value is used to set a delay between the application of the animation and its execution. So, if you set this value to 3s, the animation will actually start three seconds after it has been applied.

A negative value can be used to advance the animation by the given value. The animation in this case still starts instantaneously but advances by a specified time duration. To the users, the animation will appear as if it has already been played for given time interval or in other words, it starts given time ago. So, a delay value of -3s, will start the animation instantaneously but it will appear as if the animation actually started 3 seconds ago.

You can apply the animation-delay property to all elements as well ::before and ::after pseudo-elements. This property is not inheritable.

Syntax

This is the formal syntax for using animation-delay property.

animation-delay: <time>

Here are some examples of using this property.

animation-delay: 3s;
animation-delay: 3s, 400ms;

Acceptable Values

time

This value is used to determine the duration of delay between the start of the animation and the time when it actually begins executing.

The delay can be specified in either seconds (by specifying s as the unit) or milliseconds (by specifying ms as the unit). If you don’t specify a unit, the statement will become invalid. So, make sure that you don’t write animation-delay: 3.

You can specify delay values of multiple animations by separating them with a comma. In case of multiple animations and a single delay, all the animations will get the same delay value.

There are two cases when multiple delays are specified for multiple animations —

If the number of delays specified is equal to number of animations, each animation is assigned a delay at its respective location. For example, the animation at third place in the following code will get the third delay value.

animation-name: moveUp, moveDown, moveLeft;
animation-delay: 2s, 4s, 3s;

In this case the moveLeft animation is delayed by 3 seconds.

If the number of delays specified is less than the number of animations, the delay values will cycle from start to finish until all animations have a delay value.

animation-name: moveUp, moveDown, moveLeft;
animation-delay: 2s, 4s;

In the above case, a delay of 2s is applied to the moveLeft animation. The first delay value of 2s is assigned to moveUp animation, second delay value of 4s is assigned to moveDown. Now, to determine the delay value of the moveLeft animation, the browser again cycles through all the delay values starting from the first one. The first delay value in this case is 2s and that’s the value assigned to moveLeft.

Examples

In the following example, the third ball with a negative animation-delay is 1 second ahead than the first ball in the animation.

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

Browser Support

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