animation-name

{{CSSRef}}

The animation-name CSS property specifies the names of one or more {{cssxref("@keyframes")}} at-rules that describe the animation to apply to an element. Multiple @keyframe at-rules are specified as a comma-separated list of names. If the specified name does not match any @keyframe at-rule, no properties are animated.

{{EmbedInteractiveExample("pages/css/animation-name.html")}}

It is often convenient to use the shorthand property {{cssxref("animation")}} to set all animation properties at once.

Syntax

/* No animation */
animation-name: none;

/* Single animation */
animation-name: test_05;
animation-name: -specific;
animation-name: "sliding-vertically";

/* Multiple animations */
animation-name: test1, animation4;
animation-name:
  none,
  -moz-specific,
  sliding;

/* Global values */
animation-name: inherit;
animation-name: initial;
animation-name: revert;
animation-name: revert-layer;
animation-name: unset;

Values

none
- : A special keyword denoting no keyframes. It can be used to deactivate an animation without changing the ordering of the other identifiers, or to deactivate animations coming from the cascade.
{{cssxref("<custom-ident>")}}
- : An unquoted name identifying the animation. This identifier is composed of a combination of case-sensitive letters a to z, numbers 0 to 9, underscores (_), and/or dashes (-). The first non-dash character must be a letter. Also, two dashes are forbidden at the beginning of the identifier. Furthermore, the identifier can’t be none, unset, initial, or inherit.
{{cssxref("<string>")}}
- : A series of characters following the same rules as custom identifiers, as described above, except that they are surrounded by either double (") or single (') quotes. If using a quoted string for both the animation-name and the corresponding {{cssxref("@keyframes")}} at-rule name, none, global keywords, and names starting with an underscore or double dashes are valid, though not recommended.

[!NOTE] When you specify multiple comma-separated values on an animation-* property, they are applied to the animations in the order in which the animation-names appear. For situations where the number of animations and animation-* property values do not match, see Setting multiple animation property values.

Formal definition

{{cssinfo}}

Formal syntax

{{csssyntax}}

Examples

Naming an animation

This animation has an animation-name of rotate.

HTML

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

CSS

.box {
  background-color: rebeccapurple;
  border-radius: 10px;
  width: 100px;
  height: 100px;
}

.box:hover {
  animation-name: rotate;
  animation-duration: 0.7s;
}

@keyframes rotate {
  0% {
    transform: rotate(0);
  }
  100% {
    transform: rotate(360deg);
  }
}

Result

Hover over the rectangle to start the animation.

{{EmbedLiveSample("Naming an animation","100%","250")}}

See CSS animations for examples.

Specifications

{{Specifications}}

Browser compatibility

{{Compat}}

docs.rodeo

MDN Web Docs mirror