Abakada: Back to Basics > Language References > CSS Properties > Animation Properties > animation-name Property

Defines a list of animations that apply.

If a specified name does not match any @keyframes at-rule, no properties are animated.

The property is read/write with a default value of none; this attribute is not inherited.

The animation-name property defines the names of one or more keyframe animations.

Each name is used to select a matching @keyframes at-rules definition that describe the animation to apply to an element.

#target {
   animation-name: slide;
   animation-duration: 2s;
   ... other optional animation properties ...
}

Note that both keyframes name and duration are required, as no animation can occur when neither name nor duration is explicitly defined.

Multiple @keyframes at-rules are specified as a comma-separated list of names. If the specified name does not match any @keyframes at-rule, no properties are animated.

#target {
   animation-name: glide, grow-shrink;
   animation-duration: 3s;
   ... other optional animation properties ...
}

When multiple animation-names are specified, they are applied to the animations in the order in which the animation-names appear.

NOTE: While the separate animation properties can be set individually, the shorthand animation property offers a convenient option to set all animation properties at once.

The following basic animation examples demonstrate use of the animation-name property.

Basic Animation: Normal and Reverse Playback Run Sample | View Source

Basic Animation: Slide and Resize Run Sample | View Source

Basic Animation: Diagonal Glide with Rotate Run Sample | View Source

For a brief overview, please see Understanding and Using CSS Animations.

animation, animation-composition, animation-delay, animation-direction, animation-duration, animation-fill-mode, animation-iteration-count, animation-play-state, animation-timeline, animation-timing-function