React实现数字逐次左移CSS动画结束回弹，如何保留最终位置

实现点击按钮触发数字逐一向左移动的入场动画时，动画可以正常触发，但执行完成后数字会回弹到右侧初始位置，需要让数字在动画结束后始终停留在左侧最终位置。

原有实现代码：

React组件代码 #

import React from 'react';
import './style.css';

export default function App() {
  let [animate, setAnimate] = React.useState(false);
  return (
    <div>
      <button
        onClick={() => {
          setAnimate(true);
        }}
      >
        animate
      </button>
      {[1, 2, 3, 4, 5, 6, 7].map((x, i) => {
        return (
          <div
            className={animate ? 'fadein-item' : 'initial-item'}
            style={{ animationDelay: `${i}s` }}
          >
            {x}
          </div>
        );
      })}
    </div>
  );
}

CSS样式代码 #

.initial-item {
  transform: translateX(200px);
}
.fadein-item {
  transform: translateX(200px);
  animation-name: fadeIn;
  animation-duration: 2s;
}
@keyframes fadeIn {
  from {
    transform: translateX(200px);
  }
  to {
    transform: translateX(0px);
  }
}

CSS动画默认执行完成后，元素会恢复到动画绑定前自身的原有样式。当前.fadein-item类本身设置了transform: translateX(200px)，动画跑完后元素就会回到这个类定义的偏移位置，也就是看到的回弹效果。

只需要修改CSS，给动画类添加animation-fill-mode配置即可，不需要改动React逻辑：

• 给.fadein-item添加animation-fill-mode: both属性，这个配置有两个作用：
  • 动画延迟等待阶段，元素会提前应用from关键帧的初始偏移样式，避免类切换瞬间的样式闪动
  • 动画执行完成后，元素会永久保留to关键帧的最终样式，不会回弹
• 可以删掉.fadein-item里冗余的transform: translateX(200px)声明，避免样式冲突。

修改后的完整CSS代码：

.initial-item {
  transform: translateX(200px);
}
.fadein-item {
  animation-name: fadeIn;
  animation-duration: 2s;
  /* 核心配置：保持动画前后的关键帧样式 */
  animation-fill-mode: both;
}
@keyframes fadeIn {
  from {
    transform: translateX(200px);
  }
  to {
    transform: translateX(0);
  }
}

如果不需要兼容延迟阶段的样式保持，也可以直接用animation-fill-mode: forwards，效果是仅在动画结束后保留最后一帧样式。

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