animation-name

The animation-name CSS property sets one or more animations to apply to an element. Each name is an @keyframes at-rule that sets the property values for the animation sequence.

It is often convenient to use the shorthand property animation to set all animation properties at once.

Syntax

/* Single animation */
animation-name: none;
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: initial
animation-name: inherit
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.

<custom-ident>

A name identifying the animation. This identifier is composed of a combination of case-insensitive 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.

Formal syntax

[ none | <keyframes-name> ]#
where 
<keyframes-name> = <custom-ident> | <string>

Examples

See CSS animations for examples.

Specifications

Browser compatibilityUpdate compatibility data on GitHub

See also

• Using CSS animations
• JavaScript AnimationEvent API