CSS animation-name Property

Definition and Usage

The animation-name property chooses which @keyframes rule an element runs. The name is case-sensitive. If it does not match a keyframes rule, nothing animates.

The initial value is none. The property is not inherited, and it is not animatable: a new name takes effect in one step and restarts the animation. It applies to any element, including ::before and ::after.

CSS Syntax

One name, or a comma-separated list. A name is an identifier such as slide, or a quoted string such as "slide".

Property Values

unset equals initial here, so it is none. revert uses the user-agent value, which is also none.

How to Use animation-name

Write the keyframes, then point the element at that exact name. Give the animation a duration so you can see it.

1. Add an @keyframes rule and give it a name.
2. Set animation-name on the element to that same name, including capitals.
3. Set animation-duration above 0s. The default is 0s, so a name alone looks like it did nothing.
4. To run two animations, list both names with a comma. Pair duration, delay, and the other animation-* values in that same order.

Live Preview

The box already has a 2 second duration and repeats. Change only animation-name and watch which keyframes run.

CSS Examples

Each snippet sets a name and the duration you need to see it. The repeat only keeps the motion on screen. Use Try It Yourself for a live editor.

<style>
  @keyframes slide {
    0% { transform: translateX(0); }
    50% { transform: translateX(120px); }
    100% { transform: translateX(0); }
  }
  div {
    width: 80px;
    height: 80px;
    background: #1d4ed8;
    animation-name: slide;
    animation-duration: 2s;
    animation-iteration-count: infinite;
  }
</style>

<div>Slide</div>

<style>
  @keyframes slide {
    0% { transform: translateX(0); }
    50% { transform: translateX(120px); }
    100% { transform: translateX(0); }
  }
  div {
    width: 80px;
    height: 80px;
    background: #1d4ed8;
    animation-duration: 2s;
    animation-iteration-count: infinite;
  }
  .on { animation-name: slide; }
  .off { animation-name: none; }
</style>

<div class="on">On</div>
<div class="off">Off</div>

<style>
  @keyframes slide {
    0% { transform: translateX(0); }
    50% { transform: translateX(120px); }
    100% { transform: translateX(0); }
  }
  @keyframes fade {
    0% { opacity: 1; }
    50% { opacity: 0.25; }
    100% { opacity: 1; }
  }
  div {
    width: 80px;
    height: 80px;
    background: #1d4ed8;
    animation-name: slide, fade;
    animation-duration: 2s;
    animation-iteration-count: infinite;
  }
</style>

<div>Both</div>

Key Takeaways