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 value | none |
---|---|
Applies to | all elements, ::before and ::after pseudo-elements
|
Inherited | no |
Media | visual |
Computed value | as specified |
Animation type | discrete |
Canonical order | the unique non-ambiguous order defined by the formal grammar |
none
<custom-ident>
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.
[ none | <keyframes-name> ]#where
<keyframes-name> = <custom-ident> | <string>
See CSS animations for examples.
Specification | Status | Comment |
---|---|---|
CSS Animations The definition of 'animation-name' in that specification. | Working Draft | Initial definition. |
Feature | Chrome | Edge | Firefox | Internet Explorer | Opera | Safari |
---|---|---|---|---|---|---|
Basic support |
43 Yes -webkit- |
Yes Yes -webkit- |
16 49 -webkit- 5 -moz- |
10 |
12.1 — 15 15 -webkit- 12 — 15 -o- |
Yes 4 -webkit- |
Feature | Android webview | Chrome for Android | Edge mobile | Firefox for Android | IE mobile | Opera Android | iOS Safari |
---|---|---|---|---|---|---|---|
Basic support |
43 Yes -webkit- |
43 Yes -webkit- |
Yes Yes -webkit- |
16 49 -webkit- 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.
AnimationEvent
API
© 2005–2018 Mozilla Developer Network and individual contributors.
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.
https://developer.mozilla.org/en-US/docs/Web/CSS/animation-name