React前端实现元素平滑滑动+返回时旋转的组合动画问题

你的核心问题是把两个独立动画分开控制，没法让旋转和返回滑动绑定。直接合并成一个完整的关键帧动画序列就能精准控制每个阶段的行为：

修改后的完整代码 #

React组件代码（JSX） #

import animation from "../assets/animation.gif"

const Contact = () => {
  // 你的其他业务逻辑...

  return (
    <>
      <img 
        src={animation} 
        alt="pixel character walking" 
        className="h-[8rem] w-[8rem] slide-right"
      ></img>
    </>
  );
};

export default Contact;

CSS样式 #

/* 合并为一个完整动画序列，精准控制每个阶段行为 */
@keyframes slide-and-roll {
  /* 0% - 50%：左→右线性滑动，无旋转 */
  0% {
    right: 100%;
    transform: translateX(-50%) rotate(0deg);
  }
  50% {
    right: -20%;
    transform: translateX(-50%) rotate(0deg);
  }
  /* 50% - 100%：右→左滑动 + 360度旋转 */
  100% {
    right: 100%;
    transform: translateX(-50%) rotate(360deg);
  }
}

.slide-right {
  position: absolute;
  bottom: 5%;
  /* 初始位置与动画起始状态保持一致 */
  right: 100%;
  transform: translateX(-50%);
  /* 用单个动画替代多个独立动画，避免时序冲突 */
  animation: slide-and-roll 30s linear infinite;
}

关键修改说明 #

• 把滑动和旋转合并成单个关键帧动画：前15秒（0-50%进度）只做左→右线性滑动，后15秒（50%-100%进度）同时完成右→左滑动和360度旋转，完美实现“滑过去再旋转弹回”的需求。
• 移除原代码中animation-direction: alternate和多动画配置，避免动画时序冲突和属性覆盖问题。
• 总动画时长设为30秒（滑动15秒+返回旋转15秒），和你原设定的时间节奏保持一致。

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