animation-name

animation-name references one or more @keyframes rules. It does not supply duration or turn an ordinary box into a modal or notification.

Apply a matching keyframe name

The box has duration and fill settings but no active name until the checkbox is checked. Travel matches the @keyframes rule exactly.

<input class="run" id="run" type="checkbox" /><label for="run"
  >Run the demonstration; uncheck to reset</label
>
<div class="stage"><div class="box" aria-hidden="true"></div></div>

@keyframes travel {
  from {
    transform: translateX(0);
  }
  to {
    transform: translateX(100px);
  }
}
.stage {
  background: #eff6ff;
  padding: 1rem;
}
.box {
  width: 50px;
  height: 35px;
  background: #2563eb;
  margin-block: 0.5rem;
}
label {
  display: inline-block;
  padding: 0.75rem;
}
.box {
  animation-duration: 1s;
  animation-fill-mode: forwards;
}
.run:checked ~ .stage .box {
  animation-name: travel;
}
@media (prefers-reduced-motion: reduce) {
  .run:checked ~ .stage .box {
    animation-name: none;
  }
}

Reference two keyframe sequences

Travel changes transform and tint changes background-color. The comma-separated names run together with the same duration. If two animations write the same property, their composition/order needs separate consideration.

<input class="run" id="run" type="checkbox" /><label for="run"
  >Run the demonstration; uncheck to reset</label
>
<div class="stage"><div class="box" aria-hidden="true"></div></div>

@keyframes travel {
  from {
    transform: translateX(0);
  }
  to {
    transform: translateX(100px);
  }
}
.stage {
  background: #eff6ff;
  padding: 1rem;
}
.box {
  width: 50px;
  height: 35px;
  background: #2563eb;
  margin-block: 0.5rem;
}
label {
  display: inline-block;
  padding: 0.75rem;
}
@keyframes tint {
  to {
    background-color: #0f766e;
  }
}
.box {
  animation-duration: 1s;
  animation-fill-mode: forwards;
}
.run:checked ~ .stage .box {
  animation-name: travel, tint;
}
@media (prefers-reduced-motion: reduce) {
  .run:checked ~ .stage .box {
    animation-name: none;
  }
}

Values and defaults

The initial value is none and the property is not inherited. Names are case-sensitive and must match the keyframe rule. A comma-separated list assigns multiple animations. None can disable a particular list entry without removing the positions of other settings. Valid quoted names are also possible, but clear unquoted names that avoid animation keywords are easier to read.

Common mistakes

A name with no matching @keyframes creates no effect, but that is different from an invalid declaration. Zero duration usually gives no motion. Not every property interpolates continuously; check the property’s animation type. Changing a name restarts/replaces that named animation, while pausing should use animation-play-state. Keep semantics in HTML and state announcements in actual application behavior.

Learn animation-duration, animation, and CSS keyframes.

The demonstrations are stationary when prefers-reduced-motion:reduce is active. Their code remains available for inspection.

Sources and browser support

MDN: animation-name describes the syntax and links to the specification and compatibility data. Check individual values in that table when supporting older browsers.