animation-fill-mode 无 none 值，其合法值为 none、forwards、backwards、both 等；none 表示动画不冻结起始/结束帧，播放结束即恢复元素原有样式。
animation-fill-mode: none 根本不存在
直接说结论：animation-fill-mode 的合法值里没有 none，写上去等于无效，浏览器会忽略该声明，退回到默认行为（即 animation-fill-mode: none 实际按 animation-fill-mode: none 解析 —— 但这个值并不存在，所以最终取的是初始值 none 对应的其实是 animation-fill-mode: none？错。标准值只有 none、forwards、backwards、both 和 inherit / revert 等继承值，而 none 是合法值，但它不是“让动画结束后回退”的意思。
很多人搜“CSS 动画后回到初始状态”，顺手写了 animation-fill-mode: none，以为能“清空效果”，结果发现动画播完样式还卡在最后一帧 —— 那是因为：none 的真实含义是：**动画期间不保留起始/结束帧的样式，只在播放时生效；动画一停，立刻恢复元素原有样式（即未触发 animation 时的 CSS 值）**。它不负责“重置为初始动画帧”，而是“不冻结任何帧”。
想让动画播完回到第一帧，用 animation-direction: alternate + animation-iteration-count: 2
这是最轻量、不依赖 JS 的纯 CSS 方案，适用于单次触发动画后视觉上“回到起点”的场景（比如按钮点击缩放再弹回）。
-
animation-direction: alternate让第 1 次正向播，第 2 次反向播 -
animation-iteration-count: 2控制总共播 2 次（即一来一回） - 关键：动画的
@keyframes必须从初始态 → 目标态定义，例如0% { transform: scale(1); }→100% { transform: scale(1.2); } - 这样第 2 次反向播放就会自然回到
0%状态，且animation-fill-mode可设为forwards或省略（因最后一次播放终点就是初始帧）
示例：
立即学习“前端免费学习笔记（深入）”；
@keyframes pulse-back {
0% { transform: scale(1); opacity: 1; }
100% { transform: scale(1.3); opacity: 0.7; }
}
.btn-clicked {
animation: pulse-back 0.4s ease-in-out 2 alternate;
/* 播完停在 0% 状态，视觉回归原样 */
}更可控的方式：JS 移除 class + transition 回退
当动画逻辑较复杂（比如多步、条件分支、需响应用户交互中断），硬靠 @keyframes 循环容易失控。此时推荐用 class 控制，配合 transition 实现“进+出”两段式动效。
- 初始状态写在普通 class（如
.button）里，带transition - 触发状态用另一个 class（如
.button--active）覆盖样式，不写animation - JS 在事件后加 class，稍等
animationend或固定延迟后立即移除 class，依靠 transition 自动回退 - 注意：必须确保目标属性在两个 class 中都有定义（如都含
transform），否则 transition 不生效
示例关键片段：
.button {
transform: scale(1);
transition: transform 0.2s ease-out;
}
.button--active {
transform: scale(1.2);
}JS 中：
btn.addEventListener('click', () => {
btn.classList.add('button--active');
setTimeout(() => btn.classList.remove('button--active'), 200);
});animation-fill-mode: forwards 是常见误解源头
很多人加了 animation-fill-mode: forwards 后发现“回不去了”，就以为是它锁死了状态 —— 其实它只是让动画停在 100% 帧，而问题往往出在 @keyframes 定义本身。
- 检查你的
100%关键帧是否真的等于你想“停留”的状态？还是你误以为它该等于初始态？ - 如果目的是“播完消失/还原”，但又不想改 keyframes，可临时用
animation-fill-mode: backwards（只保留 0% 帧）或both（0% 和 100% 都保留），但它们解决不了“播完回退”需求 - 真正要“还原”，得靠 JS 清除 style 或 class，或像前面那样用 alternate + 2 次迭代
最容易被忽略的一点：CSS 动画的“初始状态”永远是该元素当前计算样式（computed style），不是你写在 0% 里的值 —— 如果元素已有内联 style="transform: scale(0.8)"，那即使 0% 写了 scale(1)，动画开始前也会先强制跳到 scale(0.8)，除非你用 !important 或更高优先级规则覆盖。
