CSS动画只执行一次并停在最后一帧，需同时设置animation-iteration-count: 1和animation-fill-mode: forwards；简写形式为animation: name duration timing-function delay iteration-count fill-mode，其中fill-mode必须置末。
CSS 动画默认只执行一次，但如果你看到它反复播放，通常是因为设置了 animation-iteration-count: infinite 或其他循环相关属性。要确保动画只执行一次，并让最终状态保留（即“停在最后一帧”），关键在于正确设置两个属性：animation-iteration-count 和 animation-fill-mode。
1. 明确指定只执行一次
用 animation-iteration-count: 1 显式声明——即使不写，默认也是 1，但显式写出更清晰、可维护，也避免被其他样式或重置规则覆盖。
- ✅ 正确写法：
animation-iteration-count: 1; - ❌ 避免写成：
animation-iteration-count: infinite;或遗漏该声明（虽默认为 1，但建议显式声明）
2. 用 fill-mode 保留结束状态
动画结束后元素会“弹回”初始样式，除非你告诉它“停在最后一帧”。这时要用 animation-fill-mode: forwards：
-
forwards：动画结束后，元素保持最后一帧的 CSS 属性值 - ⚠️ 注意：
forwards不会影响动画开始前的状态；如需同时保留起始帧，可用both - 示例：
animation-fill-mode: forwards;配合transform: translateX(100px);的动画，结束后元素就真正在右侧停住
3. 完整推荐写法（含简写）
推荐使用 animation 简写属性，一并控制时长、函数、延迟、次数和 fill mode：
立即学习“前端免费学习笔记（深入）”；
element {
animation: slideIn 0.4s ease-out 1 forwards;
}
@keyframes slideIn {
from { opacity: 0; transform: translateX(-20px); }
to { opacity: 1; transform: translateX(0); }
}
其中 1 是 iteration count，forwards 是 fill-mode —— 顺序不能错（简写中 fill-mode 必须放在最后）。
4. 常见误区提醒
容易忽略但影响效果的细节：
- 如果动画里没定义
to或最后一帧，forwards可能不生效 —— 确保 keyframes 有明确的终点声明 -
animation-play-state: paused或 JS 中调用el.style.animation = 'none'会中断或清空动画状态，慎用 - 想“重播”已执行过的动画？需先移除动画再重加（例如切换 class 或重设 animation 名称），否则因 fill-mode 保持状态，可能看不出变化
