CSS - animation-name
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.
Example
See CSS animations for examples.
Syntax
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; animation-name: <a href="css/initial">initial</a> animation-name: <a href="css/inherit">inherit</a> animation-name: <a href="css/unset">unset</a>
Values
<single-animation-name>
is one of the following keywords:
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.
<custom-ident>
- A string identifying the animation. This identifier is composed by a combination of case-insensitive letters
a
toz
, numbers0
to9
, 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. It can't benone
,unset
,initial
, orinherit
in any combination of cases.
Formal syntax
<a href="css/animation-name#single-animation-name"><single-animation-name></a><a href="css/value_definition_syntax#hash_mark_(.23)" title="Hash mark">#</a><p>where <br><code><single-animation-name> = none <a href="css/value_definition_syntax#single_bar" title="Single bar">|</a> IDENT</code></p>
Description
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 value | none |
---|---|
Applies to | all elements, ::before and ::after pseudo-elements |
Inherited | no |
Media | visual |
Computed value | as specified |
Animatable | no |
Canonical order | the unique non-ambiguous order defined by the formal grammar |
Browser Compatibility
Feature | Chrome | Firefox (Gecko) | Internet Explorer | Opera | Safari (WebKit) |
---|---|---|---|---|---|
Basic support | (Yes)-webkit 43.0 |
5.0 (5.0)-moz 16.0 (16.0)[1] |
10 | 12 -o 12.10 |
4.0-webkit |
Feature | Android | Firefox Mobile (Gecko) | IE Phone | Opera Mobile | Safari Mobile | Chrome for Android |
---|---|---|---|---|---|---|
Basic support | ? | ? | ? | ? | ? | ? |
[1] In addition to the unprefixed support, Gecko 44.0 (Firefox 44.0 / Thunderbird 44.0 / SeaMonkey 2.41) added support for a -webkit
prefixed version of the property for web compatibility reasons behind the preference layout.css.prefixes.webkit
, defaulting to false
. Since Gecko 49.0 (Firefox 49.0 / Thunderbird 49.0 / SeaMonkey 2.46) the preference defaults to true
.
See Also
Specifications
Specification | Status | Comment |
---|---|---|
CSS Animations The definition of 'animation-name' in that specification. |
Working Draft | Initial definition |
License
© 2016 Mozilla Contributors
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.
https://developer.mozilla.org/en-us/docs/web/css/animation-name