CSS动画在播放结束或重置时出现元素瞬移，本质上是因为浏览器在动画结束后的表现与开发者预期不一致。动画本身是一个临时覆盖样式的过程，当动画不再作用于元素时，元素会立即回到没有动画影响的基础状态。如果这个基础状态和动画的最后一帧存在差异，肉眼就会看到跳动。理解动画生效期间的样式优先级以及填充模式的机制，是解决这一问题的前提。
一、动画回退为什么会让元素瞬间移动
要理解跳动，首先要明确CSS动画的作用范围。动画通过@keyframes定义一组关键帧，浏览器在动画播放期间用关键帧中的声明替代元素的普通样式。动画结束后，如果没有设置animation-fill-mode，动画效果会被完全移除，元素重新回到由普通CSS规则决定的样式。此时如果元素的基础样式中没有与最后一帧相同的transform或opacity值，视觉位置就会发生突变。
举例来说，一个元素原本位于页面左侧，我们想让它向右移动200像素并停在那里。如果只在@keyframes中写 from { transform: translateX(0); } to { transform: translateX(200px); }，元素本身没有任何transform属性，那么动画结束后它会立刻回到translateX(0)，也就是起始位置。用户看到的就是元素先平滑右移，然后突然闪现回左侧。
/* 导致跳动的写法 */
.box {
width: 80px;
height: 80px;
background: #4a90e2;
animation: slide 1s ease;
}
@keyframes slide {
from {
transform: translateX(0);
}
to {
transform: translateX(200px);
}
}
在上面的代码中，动画结束后transform被移除，元素回到没有transform的状态，等同于translateX(0)。即使视觉上动画最后停在200像素处，那也只是动画的临时表现，不构成元素的持久样式。要解决这个问题，需要让动画结束状态与基础状态保持一致，或者让动画保持结束状态。
二、用animation-fill-mode和基础样式同步解决跳动
animation-fill-mode 属性控制动画在执行前和执行后是否将关键帧样式应用到元素上。默认值是 none，即动画结束后不保留任何关键帧样式。设置为 forwards 可以让动画保持在最后一帧，设置为 backwards 则会在动画延迟期间先应用第一帧，而 both 同时具备两者效果。
对于结束时跳动的问题，最直接的修复是在动画简写属性中加上 forwards。这样动画结束后元素会继续保留最后一帧的样式，不会回退。不过仅靠 forwards 并不总是稳妥，如果元素基础样式与最后一帧不同，或者后续需要通过其他类修改样式，仍然可能出现状态冲突。
/* 方式一：使用 forwards 保持结束帧 */
.box {
width: 80px;
height: 80px;
background: #4a90e2;
animation: slide 1s ease forwards;
}
@keyframes slide {
from {
transform: translateX(0);
}
to {
transform: translateX(200px);
}
}
另一种更可控的方式是直接把元素的基础样式设置成与最后一帧相同，并且保留 forwards。这样做的好处是，即便将来通过JavaScript移除动画类，元素也不会因为样式突然丢失而移位。基础样式可以写在元素的常规声明中，也可以写在一个专门表示结束状态的类中。
/* 方式二：基础样式与最后一帧保持一致 */
.box {
width: 80px;
height: 80px;
background: #4a90e2;
transform: translateX(200px); /* 基础状态就是结束状态 */
animation: slide 1s ease forwards;
}
@keyframes slide {
from {
transform: translateX(0);
}
to {
transform: translateX(200px);
}
}
但这种方式有一个限制：如果结束状态需要动态计算，比如根据视口宽度或用户交互改变目标位置，写在CSS中的固定基础样式就不够灵活。这时更适合使用JavaScript在动画结束时读取元素当前的实际样式，再将其固化为基础样式。
三、动画重置与重播时的防跳动处理
交互场景中，经常需要重新播放同一段动画，例如点击按钮后让弹窗再次执行淡入。常见做法是先移除动画类，强制浏览器重排，再重新添加动画类。如果这个过程处理不当，元素会在移除类的瞬间回到基础状态，造成明显闪动。即便设置了 forwards，移除动画类也会清除动画效果，同样可能触发跳动。
为了避免重播跳动，可以在移除动画类之前，先用JavaScript记录元素的当前计算样式，或者把结束状态保存为内联样式，然后再移除动画类。这样基础状态已经与当前帧一致，动画类移除时不会产生视觉变化。之后再通过强制回流使浏览器重新开始动画。
const box = document.querySelector('.box');
function replayAnimation() {
// 先停止动画并固化当前位置
box.style.transform = getComputedStyle(box).transform;
box.classList.remove('animate');
// 强制回流，确保浏览器重新计算样式
void box.offsetWidth;
// 重新添加动画类
box.classList.add('animate');
}
如果动画包含多个属性，例如同时改变transform和opacity，手动同步内联样式会比较繁琐。这时可以借助 animationend 事件，在动画结束时把结束状态写入内联样式，然后移除动画类。动画类只负责过程，结束状态由普通样式承担，职责更清晰。
const box = document.querySelector('.box');
box.addEventListener('animationend', function() {
// 动画结束后保存结束状态
const computedStyle = getComputedStyle(box);
box.style.transform = computedStyle.transform;
box.style.opacity = computedStyle.opacity;
// 移除动画类，元素保持当前状态
box.classList.remove('animate');
});
另外，重启动画时还可以使用克隆节点替换旧节点的方式。浏览器会认为新节点从未播放过动画，因此动画会从第一帧重新开始，同时旧节点可以立即移除，避免闪烁。但克隆节点会丢失事件监听和表单状态，更适合视觉展示型元素。
四、用transition替代动画以及性能考量
对于只有起始和结束两个状态的简单补间，使用CSS transition 往往是比 animation 更合适的选择。过渡效果本质上是将状态A到状态B的变化平滑化，元素本身始终拥有真实的样式值。当状态切换完成后，元素自然停留在结束样式，不存在动画完成后回退的问题。也正因为如此，transition在悬停、展开、折叠等交互中更加稳定。
.box {
width: 80px;
height: 80px;
background: #4a90e2;
transform: translateX(0);
transition: transform 0.5s ease;
}
.box.active {
transform: translateX(200px);
}
上面的例子中，通过切换 active 类，元素会在0.5秒内平滑移动到200像素处。由于transform本身就是普通样式，不会在动画结束后被移除，因此无论怎么切换类，都不会出现瞬移。缺点是transition只能处理两个状态之间的过渡，对于复杂的关键帧序列、循环动画或自动播放动画，仍然需要animation。
性能方面，尽量只对 transform 和 opacity 做动画。这两个属性由合成器处理，不会触发重排或重绘，动画期间帧率更稳定。如果动画涉及width、height、top等布局属性，即使通过fill-mode避免了跳动，也可能因为频繁重排导致卡顿。把跳动问题和性能问题一起规避，能让交互动效真正流畅自然。