CSS animation-duration Property

The animation-duration property is used to specify the amount of time an animation should take in completing one cycle.

The time can specified in seconds or milliseconds. It is set to 0s by default, which means that the animation occurs instantaneously or completes its one cycle in no time. You can also say that no animation plays at all.

The initial value of animation-duration property is 0s. You can apply it to all elements as well as ::before and ::after pseudo-elements. This property is not inheritable.

You can specify one or more animation duration values using a comma separated list. When you provide a list of comma-separated values for different animation properties like the duration, delay, timing function and animation name, each values in the list of is mapped to its corresponding value with the same index in the list provided in the other properties.

Syntax

This is the formal syntax for using animation-duration property —

animation-duration: <time>

Here are some examples of using this property —

animation-duration: 6s; 
animation-duration: 120ms; 
animation-duration: 1s, 3s, 600ms;

Acceptable Values

time

This value determines the amount of time that an animation should take to complete one cycle. This can be specified in either seconds (by specifying s as the unit) or milliseconds (by specifying ms as the unit). Failing to specify a unit will make the declaration invalid. It is set to zero by default.

You cannot specify a negative value as that would imply that the animation took less then zero seconds to finish. Since it is not possible to complete an animation before 0 seconds, the declaration becomes invalid.

Examples

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

Browser Support

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