Animation Duration Property
Last updated: 2026-09-13
animation-duration Animation Duration Property
The animation-duration property sets how long an animation takes to complete one full cycle. Shorter values make the animation faster; longer values make it slower. It is part of the animation shorthand and, when used on its own, overrides the duration set by the shorthand.
| Category | |
|---|---|
| Initial Value | 0s |
| Inherited | No |
| Applies To | |
| Animation Type | |
| CSS Version | CSS3 |
| Status | Standard |
📝 Syntax
animation-duration: <time>#;⚙️ Values
| Value | Type | Description |
|---|---|---|
<time> | Type | The duration of the animation |
▶ Example
Edit the code below and see the live result in the playground:
🌐 Browser Support
| Browser |  Chrome |
 Edge |
 Firefox |
 Safari |
 Opera |
|---|---|---|---|---|---|
| animation-duration | ✓ v43 | ✓ v12 | ✓ v16 | ✓ v9 | ✓ v30 |
| Supported in all major browsers | |||||
Warning： The default value is 0s, which means the animation completes instantly and no effect is visible. When using the animation shorthand, always set a duration greater than 0 explicitly.
❓ FAQ
QCan the animation-duration property use fractional seconds in CSS?
AYes. Values like 0.5s, 0.25s, 150ms, and 800ms are all valid. For micro-interactions such as button feedback and hover hints, 100ms to 300ms is typical — noticeable but not sluggish. Page-level entrance animations usually run 300ms to 600ms. Animations longer than 1s make the waiting feel obvious and suit progress or emphasis scenarios.
QCan different CSS animations on one element have different durations?
AYes. animation-duration accepts a comma-separated list, matched one-to-one with the names in animation-name. For example, with animation-name: a, b; animation-duration: 1s, 2s;, animation a runs for 1s and animation b for 2s. If there are fewer durations than names, the missing ones reuse the first value.
QWhat happens with animation-duration: 0s? Does the animation still run?
ANo visible animation is produced. A 0s duration means the animation finishes instantly and the element jumps straight to the ending keyframe, which is equivalent to having no animation. The animation shorthand defaults to a 0s duration, so animation: name; without any time will not play — always give the animation a duration greater than 0.
QWhat is the difference between animation-duration and transition-duration?
Aanimation-duration sets how long a single full cycle of a @keyframes animation takes, while transition-duration sets how long a transition takes to move from its starting value to its ending value after a state change. Both take time values and both accept comma-separated lists, but they act on completely different mechanisms and cannot replace each other.
🏷️ Related Properties
💡 Related Cases
📚 Related Tutorials
