Like transition-duration, animation-duration defaults to 0s, meaning an animation referencing a valid @keyframes name still technically runs, but completes so instantaneously that no visible animation is perceptible at all unless an explicit, nonzero duration is set. For a looping animation set with animation-iteration-count: infinite, animation-duration specifically controls the length of just one single cycle through the keyframes, with that same duration then repeating indefinitely for every subsequent loop.

1Understanding Animation-duration

💡

Just like transition-duration, animation-duration defaults to 0s — an animation referencing a correctly-defined @keyframes rule still produces no visible motion at all if this duration is left unset.

editor.html

@keyframes pulse {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.1); }
}

.badge {
  animation: pulse 2s infinite;
}

localhost:3000

2Practical Example

Here is a real-world application of Animation-duration showing how it is used in production CSS code.

editor.html

.spinner {
  animation-name: spin;
  /* animation-duration omitted, defaults to 0s */
}

localhost:3000

3Best Practices

Follow these guidelines when working with Animation-duration:

1. Always specify an explicit, nonzero animation-duration, since it defaults to 0s and produces no visible animation otherwise, even with valid keyframes defined

2. For a looping animation, remember animation-duration sets the length of just one single cycle, which then repeats that same duration for every subsequent loop

3. Choose an animation-duration that matches the perceived complexity or distance of the motion, a longer, more elaborate multi-stage animation generally needs more time than a simple, subtle two-stage one

⚠️

Tip: Just like transition-duration, animation-duration defaults to 0s — an animation referencing a correctly-defined @keyframes rule still produces no visible motion at all if this duration is left unset.

editor.html

@keyframes pulse {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.1); }
}

.badge {
  animation: pulse 2s infinite;
}

localhost:3000

Examples

Example 01Basic Usage

@keyframes pulse {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.1); }
}

.badge {
  animation: pulse 2s infinite;
}

Example 02Advanced Example

.spinner {
  animation-name: spin;
  /* animation-duration omitted, defaults to 0s */
}

Best Practices

Always specify an explicit, nonzero animation-duration, since it defaults to 0s and produces no visible animation otherwise, even with valid keyframes defined
For a looping animation, remember animation-duration sets the length of just one single cycle, which then repeats that same duration for every subsequent loop
Choose an animation-duration that matches the perceived complexity or distance of the motion, a longer, more elaborate multi-stage animation generally needs more time than a simple, subtle two-stage one

Interview Question

For a looping animation set to animation-iteration-count: infinite, does animation-duration control the total time the animation runs, or something else?▼

Hint: Think about what a single cycle through a @keyframes sequence represents, versus the total, ongoing runtime of an infinitely-looping animation.

animation-duration specifically controls the length of time for exactly one single, complete pass through the @keyframes sequence, from its 0% keyframe all the way to its 100% keyframe, it has no concept at all of, or control over, the animation's total overall runtime, which for an infinite iteration count is, by definition, unbounded and never actually ends. For an infinitely-looping animation, that same fixed duration value simply gets repeated over and over, one cycle immediately following the next indefinitely, meaning a 2-second animation-duration on an infinite animation means each individual loop takes exactly 2 seconds, and a new loop begins immediately as each previous one completes, forever, rather than the 2 seconds representing some kind of total, one-time animation runtime that then simply repeats as a completely separate, distinct thing. This distinction, one single cycle's length versus the animation's unbounded total runtime, is precisely why animation-duration remains a meaningful, necessary property to set even for animations that are explicitly intended to loop forever and therefore never have a finite total duration at all.

Exercises

MediumPractice using Animation-duration in a real scenario.

View Solution

@keyframes pulse {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.1); }
}

.badge {
  animation: pulse 2s infinite;
}

Frequently Asked Questions

For a looping animation set to animation-iteration-count: infinite, does animation-duration control the total time the animation runs, or something else?▼

Related Functions

AnimationKeyframesAnimation-timing-function