CSS animation Property

Definition and Usage

The animation property plays a @keyframes sequence on an element. One line can set how long it runs, how it eases, and whether it repeats or stays at the end.

It is a shorthand for animation-name, animation-duration, animation-timing-function, animation-delay, animation-iteration-count, animation-direction, animation-fill-mode, and animation-play-state. It applies to all elements and is not inherited.

CSS Syntax

The first time is the duration. A second time is the delay. Put the @keyframes name last.

Property Values

Any piece you leave out uses its initial value. The initial animation is none, with a duration of 0s.

How to Use animation

Name the steps, then point animation at that name with a duration you can see.

1. Write @keyframes fade with a from and a to.
2. Set a duration longer than 0s. That first time value is how long one play lasts.
3. Put the keyframe name last: animation: 1s fade;
4. Add a count, alternate, or forwards only when you need it.

Live Preview

The word fades from full opacity to a quarter. Choose how animation plays that fade.

CSS Examples

Each snippet fades one word. The only change is the animation line. Use Try It Yourself for a live editor.

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

    to {
      opacity: 0.25;
    }
  }

  p {
    animation: 1s fade;
  }
</style>

<p>Fade</p>

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

    to {
      opacity: 0.25;
    }
  }

  p {
    animation: 1s infinite alternate fade;
  }
</style>

<p>Fade</p>

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

    to {
      opacity: 0.25;
    }
  }

  p {
    animation: 1s forwards fade;
  }
</style>

<p>Fade</p>

Key Takeaways