CSS动画可以让网页元素在不依赖JavaScript的情况下实现平滑的状态变化，核心依赖@keyframes关键帧规则和animation相关属性，其中animation-name是关联动画定义和元素的关键属性。
关键帧@keyframes的基础用法
@keyframes用于定义动画在不同阶段的状态，通过百分比或者from/to关键字来划分动画的时间节点。每个节点中可以设置元素的样式属性，浏览器会自动补全节点之间的过渡效果。
下面是一个简单的淡入动画的关键帧定义示例：
/* 定义名为fadeIn的动画 */
@keyframes fadeIn {
from {
opacity: 0; /* 动画开始时不透明度为0 */
}
to {
opacity: 1; /* 动画结束时不透明度为1 */
}
}
也可以使用百分比来定义更复杂的多阶段动画，比如下面这个左右移动的动画：
@keyframes moveLeftRight {
0% {
transform: translateX(0); /* 初始位置 */
}
50% {
transform: translateX(100px); /* 中间移动到右侧100px位置 */
}
100% {
transform: translateX(0); /* 回到初始位置 */
}
}
animation-name属性的作用
animation-name属性用于指定元素要应用的动画名称，这个名称需要和@keyframes定义的动画名称完全一致，否则动画无法生效。它是animation简写属性的其中一个子属性，单独使用时需要配合其他动画属性才能看到效果。
给元素绑定上面定义的fadeIn动画的基础示例：
.target-element {
animation-name: fadeIn; /* 绑定fadeIn动画 */
animation-duration: 1s; /* 动画持续1秒，必须设置否则动画无时长 */
}
常用动画属性配合说明
除了animation-name，还需要配合其他动画属性才能让动画按照预期运行，下面是常用的动画属性说明：
| 属性名 | 作用 | 常用值 |
|---|---|---|
| animation-duration | 动画单次持续时长 | 1s、500ms等时间值 |
| animation-timing-function | 动画的速度曲线 | ease、linear、ease-in-out等 |
| animation-delay | 动画延迟执行时间 | 0s、2s等时间值 |
| animation-iteration-count | 动画重复次数 | 1、infinite（无限次）等 |
| animation-direction | 动画播放方向 | normal、alternate（往返播放）等 |
上面的属性可以合并为animation简写属性，顺序没有严格要求，但是动画名称和时长建议放在前面，示例：
.target-element {
/* 简写：动画名 时长 速度曲线 延迟 重复次数 播放方向 */
animation: moveLeftRight 2s ease-in-out 0s infinite alternate;
}
实际使用技巧
1. 多个动画同时绑定
如果需要给同一个元素同时应用多个动画，可以在animation-name中写入多个动画名称，用逗号分隔，对应的其他动画属性也需要用逗号分隔对应：
/* 同时应用淡入和移动两个动画 */
.multi-animation {
animation-name: fadeIn, moveLeftRight;
animation-duration: 1s, 2s;
animation-iteration-count: 1, infinite;
}
2. 关键帧的样式覆盖规则
@keyframes中定义的样式会覆盖元素原有的样式，但是优先级低于!important标记的内联样式或者CSS规则。如果需要在动画结束后保留最后一帧的样式，可以设置animation-fill-mode为forwards：
.keep-end-style {
animation-name: fadeIn;
animation-duration: 1s;
animation-fill-mode: forwards; /* 动画结束后保持最后一帧样式 */
}
3. 动画的性能优化
优先使用transform和opacity属性做动画，这两个属性的动画不会触发页面的重排重绘，性能更好。避免使用width、height、margin等会触发重排的属性做动画，大量元素动画时可以使用will-change属性提前告知浏览器优化：
.optimize-element {
will-change: transform, opacity; /* 提前告知浏览器优化这两个属性的变化 */
animation: moveLeftRight 2s infinite;
}
常见问题解决
如果动画没有生效，可以按照下面的顺序排查：
- 检查@keyframes的动画名称和animation-name的值是否完全一致，包括大小写
- 检查是否设置了animation-duration属性，默认值为0，不设置动画不会播放
- 检查元素本身是否有display:none属性，隐藏的元素不会执行动画
- 检查关键帧中的样式属性是否写错，比如transform是否拼写错误
注意：CSS动画的名称区分大小写，定义时写的是fadeIn，绑定的时候写FadeIn是无法生效的，这一点很多开发者容易忽略。
CSS动画animation-name关键帧@keyframes修改时间：2026-06-20 14:24:32