The animation-name
CSS property specifies the names of one or more @keyframes
at-rules describing the animation or animations to apply to the element.
The source for this interactive example is stored in a GitHub repository. If you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request.
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-sensitive letters
a
toz
, numbers0
to9
, 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 benone
,unset
,initial
, orinherit
.
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 definition
Initial value | none |
---|---|
Applies to | all elements, ::before and ::after pseudo-elements |
Inherited | no |
Computed value | as specified |
Animation type | discrete |
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
Desktop | Mobile | |||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|
animation-name | Chrome
Full support
43
| Edge
Full support
12
| Firefox
Full support
16
| IE Full support 10 | Opera
Full support
30
| Safari
Full support
9
| WebView Android
Full support
43
| Chrome Android
Full support
43
| Firefox Android
Full support
16
| Opera Android
Full support
30
| Safari iOS
Full support
9
| Samsung Internet Android
Full support
4.0
|
Legend
- Full support
- Full support
- User must explicitly enable this feature.
- User must explicitly enable this feature.
- Requires a vendor prefix or different name for use.
- Requires a vendor prefix or different name for use.
See also
- Using CSS animations
- JavaScript
AnimationEvent
API