animation-duration

Definition

The animation-duration property in CSS is used to specify the duration or length of time an animation should take to complete one cycle. It’s one of the key properties used in CSS animations. The value for this property can be specified in seconds (s) or milliseconds (ms).

If animation-duration is not specified, the default value is 0, meaning there will be no animation.

Here’s a simple example:

div {
  animation-name: example;
  animation-duration: 2s;
}

@keyframes example {
  from {
    background-color: red;
  }

  to {
    background-color: yellow;
  }
}

In this example, the animation will gradually change the background color of the div from red to yellow over a period of 2 seconds.

Syntax

.spinner {
  animation-duration: 800ms;
}

Values

<time> values such as ms or s.
inherit / initial / unset.

Practical Examples

.spinner {
  animation-name: spin;
  animation-duration: 800ms;
  animation-iteration-count: infinite;
}

Control how long each animation cycle lasts.

HTML

Code

<style>
@keyframes spin-duration-demo { to { transform: rotate(1turn); } }
.spin-duration-demo { animation: spin-duration-demo 0.8s linear infinite; }
</style>
<div class="flex gap-6">
  <div class="h-12 w-12 animate-spin rounded-full border-4 border-slate-200 border-t-sky-500"></div>
  <div class="h-12 w-12 rounded-full border-4 border-slate-200 border-t-sky-500 spin-duration-demo"></div>
</div>

Tips & Best Practices

Keep durations short (150–400ms) for micro-interactions; longer for large motion.
Match duration with easing to reinforce the desired feel (snappy vs. gentle).

Accessibility & UX Notes

Long, looping animations can be distracting—provide mechanisms to disable them.

Browser Support

Supported wherever CSS animations are available.

animation-delay to stagger start times.
transition-duration for simple property transitions.
prefers-reduced-motion media query.