CSS animation-duration Property

Definition and Usage

The animation-duration property sets how long one cycle of an animation takes. The same @keyframes look faster with a short time and slower with a long time.

You still need an animation-name. The initial value is 0s, so without a positive duration you usually see no motion. It applies to all elements, including ::before and ::after, and it is not inherited. A duration does not remove motion for someone who set prefers-reduced-motion.

CSS Syntax

Any time with a unit, in seconds or milliseconds. Zero is allowed. Negative times are invalid. For several animations, separate the times with commas, in the same order as the names.

Property Values

How to Use animation-duration

Name the animation, then set how long one play lasts.

1. Write @keyframes fade from full opacity to 0.25.
2. Set animation-name: fade.
3. Set animation-duration to a time with a unit, such as 1s or 500ms.
4. Optionally set animation-iteration-count so you can compare speeds over more than one play.

Live Preview

The same fade repeats. Only animation-duration changes. Apply again to restart from the start.

CSS Examples

Each snippet uses the same fade. The only lesson is the duration. Use Try It Yourself for a live editor.

<style>
  @keyframes fade {
    from {
      opacity: 1;
    }

    to {
      opacity: 0.25;
    }
  }

  p {
    animation-name: fade;
    animation-duration: 1s;
    animation-iteration-count: infinite;
  }
</style>

<p>Fade</p>

<style>
  @keyframes fade {
    from {
      opacity: 1;
    }

    to {
      opacity: 0.25;
    }
  }

  p {
    animation-name: fade;
    animation-duration: 500ms;
    animation-iteration-count: infinite;
  }
</style>

<p>Fade</p>

<style>
  @keyframes fade {
    from {
      opacity: 1;
    }

    to {
      opacity: 0.25;
    }
  }

  p {
    animation-name: fade;
    animation-iteration-count: infinite;
  }

  .fast {
    animation-duration: 1s;
  }

  .slow {
    animation-duration: 3s;
  }
</style>

<p class="fast">Fast</p>
<p class="slow">Slow</p>

Key Takeaways