动画结束后 transform 状态丢失导致元素“弹回”原位，根本原因是 CSS 动画默认不保留最终值；应使用 animation-fill-mode: forwards 配合 animation-duration 维持最后一帧的 computed style。
动画结束后 transform 状态丢失，元素“弹回”原位
这是最常见的错乱现象：用 transform: translateX(100px) 做入场动画，动画一停，元素立刻跳回 transform: none 的初始位置。根本原因是 CSS 动画默认不保留最终 transform 值，而是还原到动画前的样式状态。
解决方法不是靠 JS 手动补样式，而是用 animation-fill-mode 告诉浏览器：“动画结束后，请保持最后一帧的状态”。
-
animation-fill-mode: forwards是关键——它让元素在动画结束后**维持最后一帧的 computed style**，包括transform、opacity等所有动画属性 - 必须和
animation-duration配合使用；如果只写forwards但没设时长，等于没生效 - 注意：它不会覆盖元素原本的内联
style或高优先级 CSS 规则，比如你写了style="transform: translateX(0)"，那forwards永远赢不了这个内联值
transform 动画中混用 left/top 导致定位冲突
如果你在同一个元素上既用 transform: translateX() 做动画，又用 left: 100px 控制布局，动画结束时极易错位。因为 left 属于文档流定位，而 transform 是渲染层偏移，二者叠加后浏览器计算最终位置时可能取舍混乱。
- 统一用
transform实现位移（translateX、translateY、translateZ），避免和position + left/top混用 - 如果必须用
position: absolute，请确保left/top设为0，再完全交给transform控制偏移 - 检查 DevTools 的 “Computed” 面板，看最终生效的
transform值是否是你动画最后一帧期望的值；如果不是，大概率是其他样式干扰了
动画结束后 transform 被其他 CSS 规则意外重置
即使加了 forwards，元素仍“弹回”，大概率是后续某个 CSS 规则悄悄覆盖了 transform。常见于组件复用、状态切换或全局样式污染场景。
立即学习“前端免费学习笔记（深入）”；
- 检查是否有伪类如
:hover、:active或状态类如.is-collapsed包含transform: none或其他重置值 - 检查父容器是否设置了
transform（比如scale(0.9)），它会创建新的 stacking context 和 transform context，导致子元素最终位置计算偏差 - 用 Chrome DevTools 的 “Animations” 面板暂停动画，再手动勾选/取消
forwards，观察 computedtransform是否实时变化——这是最直接的验证方式
.slide-in {
animation: slideIn 0.3s ease-out;
animation-fill-mode: forwards; /* 必须加 */
}
<p>@keyframes slideIn {
from {
transform: translateX(-100%);
}
to {
transform: translateX(0);
}
}复杂点在于：当动画被 JavaScript 中断（比如 el.style.animation = 'none'）、或元素被快速增删 class、或使用了 CSS-in-JS 库的动态样式注入时，forwards 的保持行为可能被绕过。这种情况下，得靠 JS 在 animationend 事件里显式设置最终 transform 值——但那是兜底方案，不是首选。
