animation-fill-mode: forwards 未生效的主因是终态样式缺失或被覆盖：①@keyframes 缺100%/to帧；②高优先级样式覆盖；③alternate方向导致停在起始帧；④简写animation漏写forwards；⑤transform未全量声明致位移丢失；⑥多动画中某动画未设forwards致背景透明；⑦safari中absolute元素缺relative父容器致翻转消失。
animation-fill-mode: forwards 为什么没生效
写了 animation-fill-mode: forwards 却还是“闪回”或“消失”，不是浏览器 bug，而是它根本没拿到你想保留的终态样式。常见卡点有这几个：
-
@keyframes里漏了100%（或to）帧：比如只写了0%和50%，浏览器会用元素原始值“补”终态，forwards拿到的就是错的背景色或transform - 动画属性被更高优先级样式覆盖：例如行内
style="background-color: transparent"或带!important的规则，会压过 keyframes 里的声明 -
animation-direction: alternate+ 多次循环时，forwards停在最后一次反向播放的终点——也就是起始帧，看起来像“回去了” - 简写
animation属性里漏写forwards：只写animation: slideIn 0.4s;等价于显式写了animation-fill-mode: none
transform 动画结束后不保持位移的典型原因
transform 不是原子属性，它是复合值。动画中只写 transform: translateX(200px)，不代表它会继承或保留原始的 scale 或 rotate；结束时只会应用动画里声明的那部分，其余归零（none）。
解决办法只有两个：
- 在
@keyframes的100%帧里，把所有要保留的transform值一次性写全，例如：transform: translateX(200px) scale(1.2) rotate(5deg); - 如果原始状态已有
transform且不能改 keyframes，就别用transform做动画，改用left/top+position: relative，或用 JS 在animationend事件里手动设置最终样式
多个动画并行时 div 视觉“消失”的真实原因
当一个 div 同时跑多个动画（如 move-away、color-change、big-to-small），其中某个动画（比如 color-change）提前结束且没设 animation-fill-mode，它的 background-color 就会退回到初始计算值——而你没写默认 background-color，浏览器就渲染为 transparent。其他动画还在动，但背景透明，叠加在白底上就“看不见”了。
修复建议（三选一）：
- 给
div显式声明兜底背景色：background-color: #DCAB6B;（与动画起始色一致） - 为
color-change单独指定animation-fill-mode: forwards，其他保持none：animation-fill-mode: none, forwards, none; - 把
color-change改成infinite循环，并确保animation-duration合理（比如3s），避免节奏脱节
Safari 中绝对定位元素翻转时消失的隐藏条件
在 Safari（尤其是 macOS/iPadOS）中，position: absolute 元素配合 transform: rotateY() 类动画，可能出现“翻转到一半突然不见”的问题。这不是动画中断，而是 Safari 渲染引擎对定位上下文的解析异常：它找不到“最近的已定位祖先”，导致坐标系错乱、层合成失败。
最可靠解法就是一句话：
- 给该
div的直接父容器加position: relative;—— 不要依赖z-index或backface-visibility: hidden，它们在此场景下无效 - 如果父容器已是
absolute或fixed，请确认它自身有明确的定位上下文（比如祖父容器有position: relative）
真正容易被忽略的是：即使 forwards 生效，它也只维持动画结束那一刻的计算值；如果页面缩放、窗口 resize 或媒体查询触发重排，那些“被保持住”的样式仍可能视觉偏移——这时候问题已不在 animation-fill-mode，而在响应式上下文本身。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
