CSS动画只播放一次怎么设置？

想让CSS动画只执行一次并稳稳停在最后一帧？关键在于同时设置`animation-iteration-count: 1`（显式声明仅播放一次）和`animation-fill-mode: forwards`（锁定结束状态），二者缺一不可；推荐使用简写形式`animation: name duration timing-function delay iteration-count fill-mode`，注意`forwards`必须置于末位，否则无效——掌握这个组合，就能彻底告别动画“弹回原形”或意外循环的困扰，让交互动效精准、可控、专业。

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 保持状态，可能看不出变化

以上就是《CSS动画只播放一次怎么设置？》的详细内容，更多关于的资料请关注golang学习网公众号！