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
Syntax
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
Values
- none
- 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.
- IDENT
- 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.
Examples
See CSS animations for examples.Compatibility
Desktop browsers
Feature | Chrome | Firefox (Gecko) | Internet Explorer | Opera | Safari (WebKit) |
---|---|---|---|---|---|
Basic support | (Yes)-webkit | 5.0 (5.0)-moz 16.0 (16.0) | 10 | 12 -o 12.10 | 4.0-webkit |
Mobile browsers
Feature | Android | Firefox Mobile (Gecko) | IE Phone | Opera Mobile | Safari Mobile |
---|---|---|---|---|---|
Basic support | (Yes)-webkit | 5.0 (5.0)-moz 16.0 (16.0) | 10 | NA | NA |