已设置transform: translate样式的元素添加动画后跳位，如何实现平滑过渡？

嘿，这个问题我太熟悉了！你遇到的跳位现象，本质是动画结束后浏览器会把元素的transform属性重置回初始设置——你一开始给元素加了transform: translateY(100px)，但动画运行时会用动画里的transform覆盖这个初始值，动画一结束，浏览器就立刻把transform切回你最初写的translateY(100px)，所以看起来就“跳”回去了。

下面给你几个实用的解决办法，按需选就行：

方法1：用animation-fill-mode: forwards锁定结束状态 #

这是最直接的方案，让动画结束后保持最后一帧的状态，再也不会跳回初始值。

代码示例：

/* 初始样式 */
.target-element {
  transform: translateY(100px);
  /* 动画设置 */
  animation: smoothMove 1s ease-out;
  animation-fill-mode: forwards; /* 关键！锁定结束状态 */
}

/* 动画定义 */
@keyframes smoothMove {
  to {
    transform: translateY(0); /* 你的目标位置 */
  }
}

animation-fill-mode: forwards的作用就是告诉浏览器：动画结束后，就保持@keyframes里最后一帧的样式，别瞎重置。

方法2：把初始transform整合到动画起始帧 #

如果你不想依赖forwards，也可以把初始的transform值写到动画的from帧里，让动画从你想要的初始位置开始平滑过渡，结束后自然停在目标位置。

代码示例：

.target-element {
  animation: smoothMove 1s ease-out;
}

@keyframes smoothMove {
  from {
    transform: translateY(100px); /* 原来的初始位置 */
  }
  to {
    transform: translateY(0); /* 目标位置 */
  }
}

这种方式相当于把初始状态完全交给动画控制，元素默认没有transform，动画从指定位置开始动，结束后就停在目标值，不会有任何跳变。

方法3：用transition替代animation（适合简单过渡场景） #

如果你的需求只是从一个translate状态过渡到另一个，用CSS transition会更简洁，而且天生不会有跳位问题——它是监听属性变化，直接从当前值平滑过渡到目标值，结束后保持目标状态。

代码示例：

.target-element {
  transform: translateY(100px);
  transition: transform 1s ease-out; /* 监听transform变化 */
}

/* 触发过渡的条件，比如通过JS添加类或者hover */
.target-element.move-to-target {
  transform: translateY(0); /* 目标位置 */
}

当给元素加上move-to-target类时，它会从初始的translateY(100px)平滑滑到translateY(0)，结束后就稳稳停在那里，完全不会跳。

额外注意点 #

如果你同时用了多个transform函数（比如translateY(100px) scale(1.2)），一定要确保动画里的transform是完整的！比如初始是transform: translateY(100px) scale(1.2)，动画的to帧就要写transform: translateY(0) scale(1.2)，别只写translateY(0)，不然会导致scale被重置，也会出现奇怪的跳位。

内容的提问来源于stack exchange，提问作者AlexChet