The animation-duration property defines how long an animation takes to complete one cycle. Without this property, no animation will occur, as the default value is 0s.

Time Units

You can specify the duration in seconds (s) or milliseconds (ms).

• 1s = 1 second
• 100ms = 0.1 seconds
• 1000ms = 1 second

Syntax

You can set it explicitly or via the shorthand:

Best Practices

Avoid extremely fast animations (under 100ms) unless for micro-interactions, as they can be imperceptible. Conversely, extremely long animations (over 5s) might lose the user's attention. A standard UI transition is usually between 200ms and 500ms.