求助：如何实现图片从右到左的彩虹式起伏动画效果

你的问题在于当前关键帧的Y轴变化逻辑和动画曲线没匹配上彩虹轨迹的平滑起伏感，而且linear动画曲线会让运动显得生硬。以下是调整后的代码：

.imaga {
  width: 150px;
  height: 220px;
  flex-shrink: 0;
  position: relative;
  /* 单张图片动画可去掉gap，避免布局干扰 */
}

@keyframes imgcards {
  0% {
    transform: translate(0, 0);
  }
  20% {
    transform: translate(-400px, 80px); /* 先向上抬升 */
  }
  50% {
    transform: translate(-1000px, 0); /* 回到中间基线 */
  }
  80% {
    transform: translate(-1600px, -80px); /* 向下凹陷 */
  }
  100% {
    transform: translate(-2000px, 0); /* 回到初始Y位置 */
  }
}

.imaga .imgcards {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 20px;
  /* 用ease-in-out让起伏运动更自然，替代linear */
  animation: imgcards 13s ease-in-out infinite;
}

关键修改点： #

• 动画曲线调整：把linear换成ease-in-out，让图片在起伏转折点处的运动更平滑，贴合彩虹轨迹的自然弧度
• 关键帧Y轴优化：调整各阶段的Y值，形成「向上→回中→向下→回位」的对称起伏，更接近彩虹的弧形轨迹
• 布局清理：移除了父元素的gap:1000px（如果是多张图片轮播可保留，但单张动画会造成不必要的布局偏移）

如果想要更精准的彩虹曲线，可以用cubic-bezier()自定义动画曲线，或者在关键帧中增加更多节点（比如30%、70%）来细化轨迹。

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