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
::after pseudo-elements. This property is not inheritable.
This is the formal syntax for using animation-delay property.
Here are some examples of using this property.
animation-delay: 3s; animation-delay: 3s, 400ms;
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
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
In the following example, the third ball with a negative
animation-delay is 1 second ahead than the first ball in the animation.
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
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.