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>

一个标识动画的名称。该标识符由区分大小写的字母 az、数字 09、下划线(_)和/或破折号(-)组成。第一个非破折号字符必须是一个字母。此外,在标识符开头不能有两个破折号。此外,标识符不能为 noneunsetinitialinherit

备注: 当你在 animation-* 属性上指定多个以逗号分隔的值时,它们将根据值的数量以不同的方式分配给 animation-name 属性中指定的动画。有关更多信息,请参阅设置多个动画属性值

形式定义

初始值none
适用元素all elements, ::before and ::after pseudo-elements
是否是继承属性
计算值as specified
动画类型Not animatable

形式语法

animation-name = 
[ none | <keyframes-name> ]#

<keyframes-name> =
<custom-ident> |
<string>

示例

为动画命名

此动画的 animation-namerotate

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

浏览器兼容性

Report problems with this compatibility data on GitHub
desktopmobile
Chrome
Edge
Firefox
Opera
Safari
Chrome Android
Firefox for Android
Opera Android
Safari on iOS
Samsung Internet
WebView Android
WebView on iOS
animation-name
none

Legend

Tip: you can click/tap on a cell for more information.

Full support
Full support
Requires a vendor prefix or different name for use.
Has more compatibility info.

参见