编辑“︁CSS动画名称”︁

= CSS动画名称 =

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

== 基本概念 ==

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

=== 语法格式 ===
<source lang="css">
/* 定义关键帧 */
@keyframes 动画名称 {
  from { /* 起始状态 */ }
  to { /* 结束状态 */ }
}

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

== 代码示例 ==

=== 基础示例 ===
定义一个名为`slide-in`的动画，使元素从左侧滑入：
<source lang="css">
@keyframes slide-in {
  from {
    transform: translateX(-100%);
  }
  to {
    transform: translateX(0);
  }
}

.box {
  animation-name: slide-in;
  animation-duration: 2s;
}
</source>
输出效果：元素将在2秒内从屏幕左侧滑入到默认位置。

=== 多动画组合 ===
一个元素可以同时应用多个动画：
<source lang="css">
@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;
}
</source>
输出效果：元素在1秒内淡入的同时，2秒内完成360度旋转。

== 高级特性 ==

=== 动态名称切换 ===
通过JavaScript可以动态修改动画名称，实现交互式效果：
<source lang="javascript">
document.getElementById("target").style.animationName = "new-animation";
</source>

=== 命名规范 ===
建议遵循以下命名规则：
* 使用语义化名称（如`fade-in`而非`anim1`）
* 避免CSS保留字（如`none`、`initial`等）
* 使用连字符分隔单词（kebab-case）

== 实际应用案例 ==

=== 按钮悬停效果 ===
<source lang="css">
@keyframes pulse {
  0% { transform: scale(1); }
  50% { transform: scale(1.1); }
  100% { transform: scale(1); }
}

.button:hover {
  animation-name: pulse;
  animation-duration: 0.5s;
}
</source>
效果：鼠标悬停时按钮产生脉动效果。

=== 图表加载动画 ===
<mermaid>
graph TD
  A[定义动画名称] --> B[创建@keyframes]
  B --> C[应用animation-name]
  C --> D[浏览器渲染动画]
</mermaid>

== 注意事项 ==

1. '''名称冲突'''：相同名称的`@keyframes`规则会被后者覆盖
2. '''性能影响'''：复杂的动画可能引起重排（reflow）
3. '''浏览器前缀'''：某些旧版本浏览器需要`-webkit-`前缀
4. '''默认值'''：`animation-name: none`表示不应用任何动画

== 数学原理 ==
动画插值计算遵循缓动函数公式。例如线性动画的时间函数为：
<math>f(t) = t</math>
其中<math>t \in [0,1]</math>表示动画完成比例。

== 兼容性参考 ==
所有现代浏览器均支持标准语法：
* Chrome 43+
* Firefox 16+
* Safari 9+
* Edge 12+

== 总结 ==
CSS动画名称作为动画系统的核心标识符，提供了：
* 动画定义的逻辑分离
* 多动画组合能力
* 动态控制接口
通过合理命名和组合，可以构建复杂的交互动效体系。

[[Category:编程语言]]
[[Category:CSS]]
[[Category:CSS动画]]