backface-visibility: hidden仅稳定过渡中图层，无法解决动画结束闪回；需配合animation-fill-mode: forwards锁定终态，并确保关键帧定义完整且无高权重样式覆盖。
backface-visibility: hidden 不能修复动画结束后的闪烁——它只管过渡过程中的图层稳定性，和“结束回退”是两回事。
animation-fill-mode: forwards 才是解决结束闪烁的正解
动画结束后闪回原位，是因为浏览器默认把元素样式“撤回”到动画前状态。这个行为和渲染图层无关，backface-visibility 压根不参与控制。
- 必须在动画规则里显式声明
animation-fill-mode: forwards，或者写进animation简写中，例如：animation: fadeIn 0.3s ease forwards - 关键帧（
@keyframes）里必须定义完整的终态，比如100% { opacity: 1; transform: translateX(0); }；漏掉100%，forwards就锁不住东西 - 避免用内联样式（如
style="opacity: 0"）或高权重类覆盖动画终态，它们会直接压过forwards的效果
backface-visibility: hidden 该用在哪
它真正起作用的场景是 Safari 中 transform + opacity 过渡时的“白边抖动”“文字重绘”——这是图层被反复丢弃重建导致的，不是结束回退。
- 加在「正在做动画的元素本身」上，不是父容器；
backface-visibility不继承，父级设了对子元素无效 - 不需要搭配
transform: translateZ(0)，那是旧版 hack，现在反而可能干扰 WebKit 的图层策略 - 如果元素真有翻转需求（比如
rotateY(180deg)），那就得设backface-visibility: visible，否则背面永远看不见
为什么有人误以为 backface-visibility 能解决结束闪烁
因为两种问题视觉上都叫“闪”，但触发时机和机制完全不同：
- 结束闪烁：动画一停，样式瞬间跳变 → 源于
animation-fill-mode: none默认行为 - Safari 过渡闪烁：动画进行中某几帧突然白边/抖动 → 源于合成图层不稳定，
backface-visibility: hidden强制创建独立图层 - 两者可能同时存在，所以加了
forwards还觉得没用，其实是图层问题还没修
最易忽略的一点：animation-fill-mode 只对已成功触发的动画生效。如果 JS 里刚加 class 就立刻 remove，或用 animation-play-state 频繁切换，动画根本没走到“结束”，forwards 就永远没机会执行。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
