animation-name
Baseline Widely available
This feature is well established and works across many devices and browser versions. It’s been available across browsers since September 2015.
animation-name
CSS 属性指定一个或多个 @keyframes
at-rule 的名称,这些 at-rule 描述了要应用于元素的动画。多个 @keyframes
at-rule 以逗号分隔的名称列表的形式指定。如果指定的名称不匹配任何 @keyframes
at-rule,则不会对任何属性进行动画处理。
尝试一下
使用简写属性 animation
一次性设置所有动画属性通常很方便。
语法
css
/* 单个动画 */
animation-name: none;
animation-name: test_05;
animation-name: -specific;
animation-name: sliding-vertically;
/* 多个动画 */
animation-name: test1, animation4;
animation-name:
none,
-moz-specific,
sliding;
/* 全局值 */
animation-name: inherit;
animation-name: initial;
animation-name: revert;
animation-name: revert-layer;
animation-name: unset;
取值
none
-
一个特殊的关键字,表示没有关键帧。它可用于禁用动画,而不改变其他标识符的顺序,或禁用级联的动画。
<custom-ident>
-
一个标识动画的名称。该标识符由区分大小写的字母
a
到z
、数字0
到9
、下划线(_
)和/或破折号(-
)组成。第一个非破折号字符必须是一个字母。此外,在标识符开头不能有两个破折号。此外,标识符不能为none
、unset
、initial
或inherit
。
备注:
当你在 animation-*
属性上指定多个以逗号分隔的值时,它们将根据值的数量以不同的方式分配给 animation-name
属性中指定的动画。有关更多信息,请参阅设置多个动画属性值。
形式定义
形式语法
示例
为动画命名
此动画的 animation-name
为 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);
}
}
结果
将鼠标悬停在矩形上来播放动画。
参见 CSS 动画以获取示例。
规范
Specification |
---|
CSS Animations Level 1 # animation-name |
浏览器兼容性
BCD tables only load in the browser