CSS animation-duration Property

What You’ll Learn

The animation-duration property sets how long one full cycle of a CSS animation takes. Shorter durations feel snappy; longer durations feel smooth and relaxed.

Definition and Usage

The animation-duration CSS property defines the length of time it takes to complete one animation cycle. It does not control when the animation starts — that is handled by animation-delay — but how fast the keyframes play from start to finish.

Use shorter durations for buttons, toggles, and micro-interactions. Use longer durations for hero fades, background color transitions, and decorative motion that should feel calm.

📝 Syntax

Set animation-duration with a CSS time value:

selector {
  animation-duration: time;
}

Basic Example

.animated-box {
  animation-name: colorChange;
  animation-duration: 3s;
  animation-iteration-count: infinite;
}

Syntax Rules

• The value must be a valid CSS time: seconds (s) or milliseconds (ms).
• The initial value is 0s, which means no visible animation unless you set a positive duration.
• When multiple animations run on one element, use comma-separated durations matching each animation.
• Duration is the second value in the animation shorthand, after the animation name.
• Do not confuse duration with delay — duration is how long the animation runs, not how long it waits.

Default Value

The initial value of animation-duration is 0s. Without a positive duration, the animation completes instantly and usually appears not to run at all.

💎 Property Values

These are the values you will use when controlling animation speed.

animation-duration vs animation-delay

Examples Gallery

Try animation-duration with a 3-second color change, fast vs slow motion, milliseconds, and shorthand syntax.

<style>
  @keyframes colorChange {
    from { background-color: red; }
    to { background-color: yellow; }
  }
  .animated-box {
    width: 100px;
    height: 100px;
    animation-name: colorChange;
    animation-duration: 3s;
    animation-timing-function: ease-in-out;
    animation-iteration-count: infinite;
  }
</style>

<div class="animated-box"></div>

.fast { animation-duration: 0.5s; }
.slow { animation-duration: 3s; }

.tooltip {
  animation: fadeIn 400ms ease-out forwards;
}

.card {
  animation: riseUp 1.2s ease-out both;
}

💡 Best Practices