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 source for this interactive example is stored in a GitHub repository. If you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request.
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: initial animation-name: inherit 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
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
，或
inherit
.
注意
: 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
|
|---|---|
| 适用于 |
所有元素，
::before
and
::after
pseudo-elements
|
| 继承 | no |
| 计算值 | 如指定 |
| 动画类型 | discrete |
[ none | <keyframes-name> ]#where
<keyframes-name> = <custom-ident> | <string>
<div class="box"></div>
.box {
background-color: rebeccapurple;
border-radius: 10px;
width: 100px;
height: 100px;
animation-name: rotate;
animation-duration: 0.7s;
}
@keyframes rotate {
0% {
transform: rotate(0);
}
100% {
transform: rotate(360deg);
}
}
见 CSS animations 范例。
| 规范 | 状态 | 注释 |
|---|---|---|
|
CSS 动画
The definition of 'animation-name' in that specification. |
工作草案 | 初始定义。 |
| Desktop | Mobile | |||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|
animation-name
|
Chrome 完整支持 43 | Edge 完整支持 12 |
Firefox
完整支持
16
|
IE 完整支持 10 |
Opera
完整支持
30
|
Safari 完整支持 9 | WebView Android 完整支持 43 | Chrome Android 完整支持 43 |
Firefox Android
完整支持
16
|
Opera Android
完整支持
30
|
Safari iOS 完整支持 9 | Samsung Internet Android 完整支持 4.0 |
完整支持
用户必须明确启用此特征。
要求使用供应商前缀或不同名称。
AnimationEvent
API