The animation-name CSS property specifies one or more animations that should be applied to an element. Each name indicates an @keyframes at-rule that defines the property values for the animation sequence.

/* 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

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

Initial valuenone
Applies toall elements, ::before and ::after pseudo-elements
Inheritedno
Mediavisual
Computed valueas specified
Animation typediscrete
Canonical orderthe unique non-ambiguous order defined by the formal grammar

Syntax

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.

Note: When you specify multiple comma-separated values on an animation-* property, they will be assigned to the animations specified in the animation-name property in different ways depending on how many there are. For more information, see Setting multiple animation property values.

Formal syntax

[ none | <keyframes-name> ]#

where
<keyframes-name> = <custom-ident> | <string>

Examples

See CSS animations for examples.

Specifications

Specification Status Comment
CSS Animations
The definition of 'animation-name' in that specification.
Working Draft Initial definition.

Browser compatibility

FeatureChromeEdgeFirefoxInternet ExplorerOperaSafari
Basic Support

43

(Yes) -webkit-

(Yes)

(Yes) -webkit-

16

49 -webkit-

44 -webkit- 1

5 -moz-

10

12.1 — 15

15 -webkit-

12 — 15 -o-

(Yes)

4 -webkit-

FeatureAndroidChrome for AndroidEdge mobileFirefox for AndroidIE mobileOpera AndroidiOS Safari
Basic Support

43

(Yes) -webkit-

43

(Yes) -webkit-

(Yes)

(Yes) -webkit-

16

49 -webkit-

44 -webkit- 1

5 -moz-

(Yes)

12.1 — 15

15 -webkit-

12 — 15 -o-

(Yes)

(Yes) -webkit-

1. From version 44: this feature is behind the layout.css.prefixes.webkit preference (needs to be set to true). To change preferences in Firefox, visit about:config.

See also

Document Tags and Contributors

 Last updated by: fscholz,