animation-name

animation-name CSS 属性指定一个或多个描述应用于元素的动画的 @keyframes @规则的名称。多个 @keyframe @规则以逗号分隔的名称列表的形式指定。如果指定的名称与任何 @keyframe @规则都不匹配，则不会对任何属性进行动画处理。

试一试

通常，使用简写属性 animation 一次设置所有动画属性会比较方便。

语法

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;

值

none

一个表示没有关键帧的特殊关键字。它可以用来停用动画而不改变其他标识符的顺序，或者停用来自级联的动画。

<custom-ident>

标识动画的名称。此标识符由大小写敏感的字母 a 到 z、数字 0 到 9、下划线 (_) 和/或短划线 (-) 的组合组成。第一个非短划线字符必须是字母。此外，标识符开头不允许有两个短划线。此外，标识符不能为 none、unset、initial 或 inherit。

注意：当您在 animation-* 属性上指定多个逗号分隔的值时，它们会按照 animation-name 出现的顺序应用于动画。对于动画数量和 animation-* 属性值不匹配的情况，请参阅 设置多个动画属性值。

正式定义

初始值none
应用于所有元素、::before 和 ::after 伪元素
继承否
计算值如指定
动画类型不可动画

正式语法

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

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

示例

命名动画

此动画的 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 动画。

规范

规范
CSS 动画级别 1
# animation-name

浏览器兼容性

BCD 表格仅在浏览器中加载

另请参阅