CSS动画结束后元素transform定位立即重置如何解决

CSS动画默认执行完所有帧后，会立刻清除动画对元素施加的样式，元素回到动画触发前的初始状态，这就是动画结束后位置立刻重置的原因。

方案1：保留动画最终帧样式（适合保留现有animation写法） #

只需要给动画添加animation-fill-mode: forwards属性，该属性会让元素在动画播放结束后，始终保持最后一帧的样式。同时建议把元素初始位置补到关键帧的0%阶段，避免不同浏览器渲染时出现起始帧跳变。
你现有的滚动监听逻辑、HTML结构不需要做任何改动，修改后的CSS代码如下：

#TRex-Wrapper {
  width: 660px;
  height: 350px;
  position: absolute;
  transform: translateX(750px);
}

.TrexMove {
  animation: TrexAppearance 1s;
  animation-fill-mode: forwards; /* 核心修改：动画结束后保留最终样式 */
}

@keyframes TrexAppearance {
  0% {
    transform: translateX(750px); /* 补全初始帧，和元素默认位置一致 */
  }
  100% {
    transform: translateX(0);
  }
}

方案2：用transition过渡替代animation（更推荐，交互更流畅） #

如果不需要复杂的多帧动画，只是实现元素从右滑入的效果，用CSS过渡实现逻辑更简单，还能支持类移除时的反向平滑动画，滚动回顶部时元素会平滑滑出，不会生硬跳回。
修改后的CSS代码如下：

#TRex-Wrapper {
  width: 660px;
  height: 350px;
  position: absolute;
  transform: translateX(750px);
  transition: transform 1s ease; /* 给位移属性加1秒平滑过渡 */
}

.TrexMove {
  transform: translateX(0); /* 类触发后直接修改目标位置 */
}

这种写法不需要写关键帧，类切换时浏览器会自动在两个位移状态之间做平滑过渡，不存在动画结束重置的问题，上下滚动触发时的体验更连贯。

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