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 animation-name
CSS property specifies the names of one or more @keyframes
at-rules describing the animation or animations to apply to the element.
It is often convenient to use the shorthand property animation
to set all animation properties at once.
/* 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: inherit; animation-name: initial; animation-name: revert; animation-name: revert-layer; animation-name: unset;
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
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 are applied to the animations in the order in which the animation-name
s appear. For situations where the number of animations and animation-*
property values do not match, see Setting multiple animation property values.
Initial value | none |
---|---|
Applies to | all elements, ::before and ::after pseudo-elements
|
Inherited | no |
Computed value | as specified |
Animation type | Not animatable |
This animation has an animation-name
of rotate
.
<div class="box"></div>
.box { background-color: rebeccapurple; border-radius: 10px; width: 100px; height: 100px; } .box:hover { animation-name: rotate; animation-duration: 0.7s; } @keyframes rotate { 0% { transform: rotate(0); } 100% { transform: rotate(360deg); } }
Hover over the rectangle to start the animation.
See CSS animations for examples.
Specification |
---|
CSS Animations Level 2 # animation-name |
Desktop | Mobile | |||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|
Chrome | Edge | Firefox | Internet Explorer | Opera | Safari | WebView Android | Chrome Android | Firefox for Android | Opera Android | Safari on IOS | Samsung Internet | |
animation-name |
43
3
|
12
12
|
49
16
5
|
10 |
30
15
12.1-15
12-15
|
9
4
|
43
≤37
|
43
18
|
49
16
5
|
30
14
12.1-14
12-14
|
9
3.2
|
4.0
1.0
|
AnimationEvent
API
© 2005–2022 MDN contributors.
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.
https://developer.mozilla.org/en-US/docs/Web/CSS/animation-name