animation-name
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.
Try it
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: inherit;
animation-name: initial;
animation-name: revert;
animation-name: revert-layer;
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 | Not animatable |
Formal syntax
Examples
Naming an animation
This animation has an animation-name
of rotate
.
HTML
<div class="box"></div>
CSS
.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);
}
}
Result
Hover over the rectangle to start the animation.
See CSS animations for examples.
Specifications
Specification |
---|
CSS Animations Level 2 # animation-name |
Browser compatibility
BCD tables only load in the browser
See also
- Using CSS animations
- JavaScript
AnimationEvent
API