CSS Reference Property

animation-name

The animation-name property is used to specify one or more names of animations defined by @keyframes rules, that are to be applied to the selected element.

A @keyframes rule specifies the property values that are to be animated over a sequence of animation keyframes.

You can specify either one animation name in animation-name or a list of comma-separated names. Each name belongs to a @keyframes identifier. If the animation name specified using animation-name does not exist, no animation is applied.

When you provide a list of comma-separated animation names, this list is usually mapped to a list of values provided by other animation-related properties, such as the animation-delay, animation-timing-function, and animation-duration properties, among others. Each list of values in these properties is treated kind of like an array, where each value in a list of values has its own index. Then, each value in a list of values is mapped to its corresponding value with the same index in the list provided in the other properties.

The animation-name property is usually set as part of the animation shorthand property.

The animation applied to an element can be controlled using the different animation properties, including how many times the animation iterates, whether or not it alternates between the begin and end values, and whether or not the animation should be running or paused. An animation can also delay its start time.

Official Syntax

Syntax:

animation-name: <single-animation-name># 
/* where */
<single-animation-name> = none | <user-ident>

Initial: none
Applies To: all elements; and ::before and ::after pseudo-elements
Animatable: no

Values

none: No keyframes are specified at all, so there will be no animation. Any other animations properties specified for this animation have no effect.
<user-ident>: The animation will use the keyframes with the name specified by the <user-ident>, if they exist. If no such keyframes exist, there is no animation.

Examples

The following are all valid animation-name values:

animation-name: bounce;
animation-name: shake, jump;
animation-name: some-animation-name;

The following applies an animation to an element and controls it using other animation properties. The animation name matches the name of an animation defined using an @keyframes rule. The .box element will not be animated because, in this code, there is no animation that matches the animation name provided in the animation-name property. The .animated element will have two animations applied to it, each with a specified duration.

.element {
    animation-name: bounce;
    animation-duration: 3s;
    animation-iteration-count: infinite;
}

.box {
    animation-name: jump;
    animation-duration: 2s;
    animation-timing-function: ease-in-out;
}

.animated {
    animation-name: bounce, change-bg-color;
    animation-duration: 3s, 2s;
    /* ... */
}

@keyframes change-bg-color {
    from {
        background-color: red;
    }
    
    to {
        background-color: blue;
    }
}

@keyframes bounce {

  from {
    top: 100px;
    animation-timing-function: ease-out;
  }

  25% {
    top: 50px;
    animation-timing-function: ease-in;
  }

  50% {
    top: 150px;
    animation-timing-function: ease-out;
  }

  75% {
    top: 75px;
    animation-timing-function: ease-in;
  }

  to {
    top: 100px;
  }

}

Live Demo

In the following demo, two animations are defined using two @keyframes rules. One of these animations is applied to the element. Play with the code and apply the second animation to it to see how it affects the element.

View this demo on the Codrops Playground

Browser Support

CSS Animation

Complex method of animating certain properties of an element

W3C Working Draft

Supported from the following versions:

Desktop

Mobile / Tablet

* denotes prefix required.

Supported:
Yes
No
Partially
Polyfill

Stats from caniuse.com

Referencia de CSS3