W3docs
en
Log in

CSS animation-name Property

Use the animation-name property to specify one or more names of animations defined by @keyframes rules. Try the animation-name Property example.

The animation-name property names one or more @keyframes animations to apply to an element. The value is the identifier you gave a @keyframes rule — the name is what links the element to its animation. Without animation-name, the browser has no keyframes to run, so nothing animates even if you set a duration.

This property only points to the animation; it does not start it on its own. You still need a non-zero animation-duration for the keyframes to play. animation-name is one of the CSS3 properties.

In practice you rarely write animation-name by hand — the animation shorthand sets the name, duration, timing function, delay, iteration count, direction, and more in a single declaration. Use the longhand when you want to override just the name (for example, swap the keyframes on hover while keeping the same timing).

When to use it

  • Reuse one set of keyframes across several elements with different durations or delays, by setting animation-name once and varying the other longhands.
  • Switch animations on state — give an element one name normally and a different name on :hover or a class toggle.
  • Run several animations at once on the same element by listing comma-separated names (see Multiple animations below).

Naming rules

A keyframes name is a CSS identifier, so the same rules apply:

  • It is case-sensitive: Slide and slide are different names.
  • It may contain letters, digits, hyphens, and underscores, but cannot start with a digit.
  • Avoid the CSS-wide keywords none, initial, inherit, and unset as animation names — animation-name: none is interpreted as "no animation", not as a keyframes block literally named none.
Initial Valuenone
Applies toAll elements. It also applies to ::before and ::after pseudo-elements.
InheritedNo.
AnimatableNo.
VersionCSS3
DOM Syntaxobject.style.animationName = "element";

Syntax

Syntax of CSS animation-name Property

animation-name: keyframename | none | initial | inherit;

You can supply more than one name, separated by commas, to apply several animations to the same element:

animation-name: slide, fade;

Example of the animation-name property

Example of CSS animation-name Property

<!DOCTYPE html>
<html>
  <head>
    <style>
      div {
        padding: 50px;
        animation-name: element;
        animation-duration: 4s;
        animation-iteration-count: infinite;
      }
      @keyframes element {
        0% {
          background-color: #8ebf42;
        }
        50% {
          background-color: #1c87c9;
        }
        100% {
          background-color: #d5dce8;
        }
      }
    </style>
  </head>
  <body>
    <h2>Animation-name example</h2>
    <div>The name of the animation is set as "element".</div>
  </body>
</html>
Try it Yourself »
Info

In the given example the name of animation is set to "element". You can choose any name you want, as long as a matching @keyframes element rule exists. If the name has no matching @keyframes rule, the declaration is simply ignored and nothing animates.

Multiple animations

When you list several names, each maps positionally to the values of the other animation longhands. Here slide gets 2s/ease-out and fade gets 4s/linear:

<!DOCTYPE html>
<html>
  <head>
    <style>
      div {
        width: 120px;
        padding: 20px;
        background: #1c87c9;
        color: #fff;
        animation-name: slide, fade;
        animation-duration: 2s, 4s;
        animation-timing-function: ease-out, linear;
        animation-iteration-count: infinite;
      }
      @keyframes slide {
        from { transform: translateX(0); }
        to   { transform: translateX(150px); }
      }
      @keyframes fade {
        from { opacity: 1; }
        to   { opacity: 0.2; }
      }
    </style>
  </head>
  <body>
    <div>Sliding and fading at the same time.</div>
  </body>
</html>

If you provide fewer values for another property than there are names, the values repeat to cover every name. For finer control over the rest of the animation, see animation-delay and animation-direction.

Values

ValueDescription
noneThis is default value. Specifies that there will be no animation
keyframenameSpecifies the name of animation.
initialIt makes the property use its default value.
inheritIt inherits the property from its parents element.

Practice

Practice
What does the CSS animation-name property do?
What does the CSS animation-name property do?
Was this page helpful?