CSS动画名称[编辑 | 编辑源代码]

CSS动画名称（Animation Name）是CSS动画中用于标识特定动画序列的关键属性，它通过`@keyframes`规则与动画定义绑定。开发者通过为动画命名，可以在多个元素上复用相同的动画效果，或对同一元素应用不同的动画序列。

基本概念[编辑 | 编辑源代码]

CSS动画名称通过`animation-name`属性指定，其值对应预先定义的`@keyframes`名称。当浏览器渲染时，会根据名称查找匹配的关键帧规则，并执行相应的动画效果。

语法格式[编辑 | 编辑源代码]

/* 定义关键帧 */
@keyframes 动画名称 {
  from { /* 起始状态 */ }
  to { /* 结束状态 */ }
}

/* 应用动画 */
选择器 {
  animation-name: 动画名称;
}

代码示例[编辑 | 编辑源代码]

基础示例[编辑 | 编辑源代码]

定义一个名为`slide-in`的动画，使元素从左侧滑入：

@keyframes slide-in {
  from {
    transform: translateX(-100%);
  }
  to {
    transform: translateX(0);
  }
}

.box {
  animation-name: slide-in;
  animation-duration: 2s;
}

输出效果：元素将在2秒内从屏幕左侧滑入到默认位置。

多动画组合[编辑 | 编辑源代码]

一个元素可以同时应用多个动画：

@keyframes fade {
  from { opacity: 0; }
  to { opacity: 1; }
}

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

.element {
  animation-name: fade, rotate;
  animation-duration: 1s, 2s;
}

输出效果：元素在1秒内淡入的同时，2秒内完成360度旋转。

高级特性[编辑 | 编辑源代码]

动态名称切换[编辑 | 编辑源代码]

通过JavaScript可以动态修改动画名称，实现交互式效果：

document.getElementById("target").style.animationName = "new-animation";

命名规范[编辑 | 编辑源代码]

建议遵循以下命名规则：

使用语义化名称（如`fade-in`而非`anim1`）
避免CSS保留字（如`none`、`initial`等）
使用连字符分隔单词（kebab-case）

实际应用案例[编辑 | 编辑源代码]

按钮悬停效果[编辑 | 编辑源代码]

@keyframes pulse {
  0% { transform: scale(1); }
  50% { transform: scale(1.1); }
  100% { transform: scale(1); }
}

.button:hover {
  animation-name: pulse;
  animation-duration: 0.5s;
}