animation-name property CSS Reference

Definition and Usage

The animation-name CSS property specifies a list of animations that should be applied to the selected element. Each name indicates a @keyframes at-rule that defines the property values for the animation sequence.

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

  • Initial none
  • Applies to all elements, ::before and ::after pseudo-element
  • Inherited no
  • Media visual
  • Computed Value as specified
  • Animatable no
  • Canonical order the unique non-ambiguous order defined by the formal grammar


Formal syntax: <single-animation-name>#
animation-name: none
animation-name: test_05
animation-name: -specific
animation-name: sliding-vertically
animation-name: test1
animation-name: test1, animation4
animation-name: none, -moz-specific, sliding


Is 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.
A string identifying the animation. This identifier is composed by 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 (that is, no number at the beginning of it, even if preceded by a dash.) Also, two dashes are forbidden at the beginning of the identifier.


See CSS animations for examples.


Desktop browsers

FeatureChromeFirefox (Gecko)Internet ExplorerOperaSafari (WebKit)
Basic support (Yes)-webkit5.0 (5.0)-moz
16.0 (16.0)
10 12 -o

Mobile browsers

FeatureAndroidFirefox Mobile (Gecko)IE PhoneOpera MobileSafari Mobile
Basic support (Yes)-webkit5.0 (5.0)-moz
16.0 (16.0)

Relative articles