如何通过css animation-name指定动画名称

css中的animation-name属性用于指定要应用到元素上的动画名称，这个名称需要和@keyframes规则中定义的动画名称一一对应，才能让元素执行对应的动画效果。它是css动画模块的核心属性之一，只有正确设置该属性，元素才能关联到对应的动画关键帧配置。

animation-name基本语法

animation-name的语法格式如下：

/* 基本语法 */
animation-name: none | <keyframes-name>;

/* 多个动画名称，用逗号分隔 */
animation-name: move, fade;

其中<keyframes-name>就是在@keyframes规则中定义的动画名称，名称区分大小写，必须完全匹配才能生效。

基础使用示例

首先需要用@keyframes定义动画名称，再通过animation-name关联到元素，完整的简单示例如下：

/* 定义名为slide-in的动画 */
@keyframes slide-in {
  from {
    transform: translateX(-100%);
  }
  to {
    transform: translateX(0);
  }
}

/* 给目标元素应用动画 */
.target-box {
  width: 200px;
  height: 100px;
  background-color: #4CAF50;
  /* 指定动画名称为slide-in */
  animation-name: slide-in;
  /* 动画持续时间，必须设置否则动画不生效 */
  animation-duration: 1s;
}

<div class="target-box">滑动进入的元素</div>

上面的代码中，@keyframes定义了名为slide-in的动画，然后在.target-box的样式中通过animation-name指定该动画名称，同时设置animation-duration为1秒，元素加载时就会执行从左到右滑入的动画。

多个动画名称的使用

animation-name支持同时指定多个动画名称，多个名称之间用逗号分隔，对应的元素会同时执行多个动画，示例如下：

/* 定义移动动画 */
@keyframes move-right {
  to {
    transform: translateX(100px);
  }
}

/* 定义颜色变化动画 */
@keyframes change-color {
  to {
    background-color: #ff9800;
  }
}

.multi-animation-box {
  width: 150px;
  height: 150px;
  background-color: #2196F3;
  /* 同时指定两个动画名称 */
  animation-name: move-right, change-color;
  animation-duration: 2s, 2s;
  animation-iteration-count: infinite;
}

<div class="multi-animation-box">同时执行两个动画</div>

此时元素会同时向右移动并改变背景颜色，两个动画的执行时长都是2秒，且无限循环。

特殊取值none的作用

当animation-name取值为none时，表示元素不应用任何动画，即使元素关联了@keyframes规则也不会生效，这个取值常用于动态控制动画的开关，示例如下：

@keyframes rotate {
  to {
    transform: rotate(360deg);
  }
}

.rotate-box {
  width: 100px;
  height: 100px;
  background-color: #e91e63;
  animation-name: none;
  animation-duration: 1s;
  animation-iteration-count: infinite;
}

/* 鼠标悬停时开启动画 */
.rotate-box:hover {
  animation-name: rotate;
}

<div class="rotate-box">悬停开启旋转</div>

默认状态下rotate-box的animation-name为none，不会执行旋转动画，当鼠标悬停在元素上时，animation-name被修改为rotate，元素就会开始无限旋转。

使用注意事项

• animation-name指定的名称必须和@keyframes定义的名称完全一致，包括大小写，否则动画无法生效。
• 单独设置animation-name不会让动画执行，必须同时设置animation-duration属性，因为动画默认持续时间为0，不会显示动画效果。
• 如果同时指定多个动画名称，对应的动画属性如animation-duration等也需要按相同顺序设置，或者设置为单个值应用到所有动画。
• 动画名称不能是css保留字，避免使用initial、inherit、unset等作为动画名称，防止出现解析错误。

常见问题解答

为什么设置了animation-name动画还是不生效

首先检查@keyframes定义的名称和animation-name的值是否完全一致，然后确认是否设置了animation-duration属性，最后检查元素是否被其他样式覆盖导致动画无法执行。

动画名称可以包含中文吗

理论上css支持中文作为动画名称，但是实际开发中建议优先使用英文字母、数字、下划线的组合作为动画名称，避免不同浏览器对中文解析出现兼容性问题。

cssanimation-name动画名称@keyframes修改时间：2026-06-14 03:06:35