animation-name
The animation-name
CSS property specifies the names of one or more @keyframes
at-rules that describe the animation to apply to an element. Multiple @keyframe
at-rules are specified as a comma-separated list of names. If the specified name does not match any @keyframe
at-rule, no properties are animated.
Try it
It is often convenient to use the shorthand property animation
to set all animation properties at once.
Syntax
css
/* 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 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.
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
html
<div class="box"></div>
CSS
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 1 # animation-name |
Browser compatibility
BCD tables only load in the browser
See also
- Using CSS animations
- JavaScript
AnimationEvent
API - Other related animation properties:
animation
,animation-composition
,animation-delay
,animation-direction
,animation-duration
,animation-fill-mode
,animation-iteration-count
,animation-play-state
,animation-timeline
,animation-timing-function