CSS 'animation-duration' Property Explained

The CSS 'animation-duration' property specifies the length of time an animation takes to complete one cycle. It determines how long an animation should run from start to finish, thereby controlling its speed. A shorter duration makes the animation faster, while a longer duration slows it down.

CSS 'animation-duration' Property Examples

See the Pen CSS 'animation-duration' Property by Webzstore (@webzstore) on CodePen.

The 'animation-duration' property is a fundamental aspect of CSS animations, enabling developers to fine-tune how long animations last to achieve the desired effect. Whether aiming for subtle, quick transitions or more pronounced, slower movements, adjusting the animation duration is key to creating engaging and appropriate animations for your web content.

Browser Support For 'animation-duration' Property

Source: MDN browser-compat-data 8.1.4, checked 3 October 2026. Prefixed support and implementations that were later removed are not counted, and some browsers list partial support or extra values. See the MDN reference for animation-duration for the full compatibility details, including mobile browsers.

CSS Syntax of the 'animation-duration' Property

animation-duration: time | auto;

/* Examples */
animation-duration: 2s;
animation-duration: 500ms;
animation-duration: 0s;

Usage of the 'animation-duration' Property

Use 'animation-duration' whenever you want to define how long an animation should last. Timing animations to match the desired feel and pacing of your website or application is essential. This property is crucial in ensuring animations contribute positively to the user experience by ensuring they are neither too quick to be missed nor too slow to cause delay.

Property Values of the 'animation-duration' Property

• Time: The duration of the animation cycle, specified in seconds (s) or milliseconds (ms); the unit is required. The value must be zero or positive, and negative values are invalid. The initial value is 0s, which means the animation has no visible running time. An animation with a zero duration still counts as running, though: the animationstart and animationend events still fire, and animation-fill-mode still applies, so with backwards or both the first keyframe's styles are shown during the delay, and with forwards or both the last keyframe's styles are kept afterwards. With the default fill mode of none, there is no visible effect.
• Auto: For ordinary time-based animations, auto behaves like 0s. For scroll-driven animations it makes the animation fill the whole timeline.