animation-fill-mode: forwards 可使动画结束后保持最后一帧样式，但需配合 animation-iteration-count: 1 才实现“执行一次后停住”；若 transform 等属性未在 keyframes 最后一帧显式声明，则仍会丢失。
animation-fill-mode: forwards 能让动画结束后保持最后一帧
CSS 动画默认执行完就回退到初始状态，看起来像“消失了”。根本原因不是动画没生效，而是动画结束后的元素样式被重置为 animation 作用前的值。解决方法是用 animation-fill-mode 控制动画前后应用的样式。
最常用且有效的取值是 forwards：动画结束后，元素保留 @keyframes 中最后一帧声明的样式。
-
animation-fill-mode: none（默认）：动画不改变首尾帧外的样式 -
animation-fill-mode: forwards：保留最后一帧的属性值，视觉上“停住” -
animation-fill-mode: backwards：动画开始前就应用第一帧（需配合animation-delay才明显） -
animation-fill-mode: both：等价于forwards+backwards
必须同时设置 animation-iteration-count: 1 才能真正“执行一次”
只加 forwards 不够——如果 animation-iteration-count 是默认的 1 倒没问题；但一旦写成 infinite 或其他值，forwards 依然生效，只是每次循环结束都“停在最后一帧”，实际效果可能不符合预期。
确保行为符合“执行一次后保持”这个目标，两个条件缺一不可：
立即学习“前端免费学习笔记（深入）”；
-
animation-iteration-count: 1（显式写出更安全，避免继承或重置干扰） animation-fill-mode: forwards
漏掉前者，动画会反复播放；漏掉后者，即使只播一次，也会闪回原始状态。
常见错误：transform 动画中 translate/rotate/scale 没生效
很多用户发现加了 forwards，transform 属性还是没留住。典型原因是：动画里写的 transform: translateX(100px)，但元素原本有 transform: scale(0.9) ——CSS transform 不会自动合并，动画结束时只保留 keyframes 里声明的 transform 值，其他 transform 被覆盖为 none。
正确做法是，在 @keyframes 的最后一帧中，把所有需要保留的 transform 值都写全：
@keyframes slideIn {
from {
opacity: 0;
transform: translateX(-20px) scale(0.95);
}
to {
opacity: 1;
transform: translateX(0) scale(0.95); /* 显式保留 scale */
}
}否则浏览器无法推断你“想保留 scale”，只会按 keyframes 中定义的值渲染。
兼容性与替代方案：IE10+ 支持，但不要依赖 JS 控制 class 切换
animation-fill-mode 在 IE10+、Edge、Chrome、Firefox、Safari 均支持，移动端 iOS Safari 9.3+ 也 OK。唯一要注意的是旧版 Android Browser（4.3 及以下）不支持，但已基本可忽略。
有人用 JS 监听 animationend 事件再手动加 class 保存状态，这反而引入竞态和冗余逻辑。只要 CSS 写对，没必要 JS 干预：
.box {
animation: slideIn 0.3s ease-out;
animation-fill-mode: forwards;
animation-iteration-count: 1;
}真正容易被忽略的点是：动画属性（如 opacity、transform）必须在 keyframes 里明确写出终值；否则 forwards 什么也留不住。
