必须显式设置animation-fill-mode: forwards，否则动画结束后元素会弹回初始状态；这是因为其默认值为none，仅在播放中生效，结束后立即丢弃关键帧样式。
必须显式写 animation-fill-mode: forwards，否则动画一停就“弹回”初始状态——这不是 bug，是 CSS 规范默认行为。
为什么写了 @keyframes 最后一帧却没留住
因为 animation-fill-mode 默认值是 none，动画只在播放过程中生效，结束后立刻丢弃所有关键帧样式。哪怕你在 100% 写了 transform: translateX(200px)，停住瞬间元素也会跳回原位。
- 不是 keyframes 没写对，而是缺少
forwards声明 - 不能靠 JS 读取
getComputedStyle立刻拿到终值——渲染可能未完成，建议加requestAnimationFrame延迟读取 - 如果用 JS 动态设置
animation，记得连同animation-fill-mode一起设，否则简写会覆盖掉它
forwards 不生效的三个常见原因
写了但没效果？先排查这三件事：
anything-to-html
下载
将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。
-
animation-duration是0s，或animation-iteration-count被设为0—— 动画根本没执行，forwards就无从谈起 - 动画结束后的属性被后续 CSS 覆盖，比如动画设了
opacity: 0，但后面有div { opacity: 1 }，终态直接被干掉 - 同时用了
transition：若动画终值和 transition 的起始值不一致，浏览器可能触发一次意外过渡，看起来像“没留住”
多段连续动画怎么串起来不闪回
关键不是堆多个 animation，而是靠 delay 和 forwards 精确衔接：
- 第一段：
animation: fade-in 0.3s ease forwards; - 第二段（接在淡入后缩放）：
animation: scale-up 0.4s ease 0.3s forwards;（delay = 0.3s） - 第三段（缩放后平移）：
animation: slide-right 0.5s ease 0.7s forwards;（delay = 0.3 + 0.4） - 每一段都必须带
forwards，且delay累加，否则后一段会从原始位置开始，造成闪回
容易被忽略的是：Safari ≤14.1 对 transform 多属性组合（比如 scale + rotate 同时存在）偶有渲染残留，此时可尝试在末帧额外加一句 transform: translateZ(0) 强制重绘。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
