CSS animation-duration Property

The animation-duration property defines how many seconds or milliseconds an animation cycle takes to complete from start to finish.

selector { animation-duration: time; }
<time> Specifies the length of time that an animation should take to complete one cycle in seconds (s) or milliseconds (ms).

Code Examples

A basic example showing a red box that pulses in size over a 2-second duration indefinitely.

<div style="width: 100px; height: 100px; background: #ff0000; animation-name: pulse; animation-duration: 2s; animation-iteration-count: infinite;"></div>

<style>
@keyframes pulse {
  0% { transform: scale(1); }
  50% { transform: scale(1.2); }
  100% { transform: scale(1); }
}
</style>

An advanced implementation using JavaScript to dynamically toggle the animation speed of a sliding blue box.

<div id="runner" style="width: 50px; height: 50px; background: #0000ff; position: relative; animation: slide 1s linear infinite;"></div>
<button onclick="setSpeed('5s')">Slow</button>
<button onclick="setSpeed('0.5s')">Fast</button>

<script>
function setSpeed(time) {
    const el = document.getElementById("runner");
    el.style.animationDuration = time;
}
</script>

<style>
@keyframes slide {
  0% { left: 0px; }
  100% { left: 200px; }
}
</style>

Pro Tip

If you are debugging a complex @keyframes sequence, temporarily set the animation-duration to a very high value like "20s". This allows you to watch the transition frame-by-frame in slow motion to spot any visual hitches in your logic.

Deep Dive

Think of animation-duration as the speed limit for your keyframes. If you have a @keyframes rule that moves a box from left to right, this property determines if that journey takes a blink of an eye or a slow crawl. It is a required component for seeing any motion; since the default is 0s, the animation effectively happens instantly, making it invisible to the user. You can specify time in seconds like "3s" or milliseconds like "3000ms". If you provide multiple values separated by commas, they will map to multiple animations defined in the animation-name property in the same order.

Best Practices

Keep your interface snappy by using shorter durations for UI feedback, typically between 150ms and 400ms. Longer durations should be reserved for complex transitions or decorative background elements. Always pair this with animation-timing-function to ensure the motion feels organic rather than robotic.

Common Pitfalls

The most frequent mistake is omitting the unit. In CSS, writing "animation-duration: 2;" is invalid and the browser will ignore it; it must be "2s". Also, remember that a duration of 0s prevents the animation from running at all, which is the default state.

Accessibility

Some users suffer from vestibular motion disorders where moving elements cause nausea. Use the "prefers-reduced-motion" media query to zero out or significantly lengthen the animation-duration for those users to ensure your site remains usable for everyone.

Dev Data Table: animation-duration property

default 0s
animatable no
inherited no
experimental no
year_intro 2009
year_standard 2012
js_syntax_1 object.style.animationDuration = "2s";
js_syntax_2 object.style.setProperty("animation-duration", "500ms");
js_note When manipulating this via JavaScript, ensure you include the time unit string like "s" or "ms", otherwise the setting will be ignored.
browsers { "Chrome": 43, "Edge": 12, "Firefox": 16, "Safari": 9, "Opera": 30, "Chrome Android": 43, "Safari on iOS": 9, "Samsung Internet": 4, "Opera Mobile": 30 }
results render here...