核心问题诊断 #

你猜的完全没错！动画只能运行一次的根源就是动画类没有被移除，再加上几个影响平滑度的小问题：

• 初始用display: none控制中间和底部图片的显示，会打断动画的平滑过渡（display切换是瞬间生效的，没有过渡缓冲）
• 动画结束后元素的opacity被固定在最后一帧的值，且没有重置状态
• 绑定的animationEnd事件没有处理重复触发的情况，导致动画类不断堆积

修复后的完整代码 #

HTML（仅优化结构缩进，核心内容不变）

<div class="box">
  <img src="http://alpizano.com/assets/images/venom1.png" width="50%" class="top">
  <img src="http://alpizano.com/assets/images/venom2.png" width="50%" class="middle">
  <img src="http://alpizano.com/assets/images/venom3.png" width="50%" class="bottom">
</div>

CSS（优化初始状态与动画逻辑）

.box {
  position: relative;
}

img {
  position: absolute;
  top: 0;
  left: 0;
  /* 用opacity替代display:none控制初始显示，保证过渡平滑 */
}

.top {
  opacity: 1;
}

.middle, .bottom {
  opacity: 0;
}

/* 正向动画序列：top淡出 → middle淡入再淡出 → bottom淡入 */
@keyframes forwardTop {
  0% { opacity: 1; }
  30% { opacity: 0; }
  100% { opacity: 0; }
}

@keyframes forwardMiddle {
  0% { opacity: 0; }
  25% { opacity: 1; }
  75% { opacity: 0; }
  100% { opacity: 0; }
}

@keyframes forwardBottom {
  0% { opacity: 0; }
  70% { opacity: 0; }
  100% { opacity: 1; }
}

/* 反向动画序列：bottom淡出 → middle淡入再淡出 → top淡入 */
@keyframes reverseBottom {
  0% { opacity: 1; }
  30% { opacity: 0; }
  100% { opacity: 0; }
}

@keyframes reverseMiddle {
  0% { opacity: 0; }
  25% { opacity: 1; }
  75% { opacity: 0; }
  100% { opacity: 0; }
}

@keyframes reverseTop {
  0% { opacity: 0; }
  70% { opacity: 0; }
  100% { opacity: 1; }
}

/* 动画类：添加fill-mode保持结束状态，方便衔接反向动画 */
.top.forward {
  animation: forwardTop 3s ease-in-out forwards;
}

.middle.forward {
  animation: forwardMiddle 3s ease-in-out forwards;
}

.bottom.forward {
  animation: forwardBottom 3s ease-in-out forwards;
}

.bottom.reverse {
  animation: reverseBottom 3s ease-in-out forwards;
}

.middle.reverse {
  animation: reverseMiddle 3s ease-in-out forwards;
}

.top.reverse {
  animation: reverseTop 3s ease-in-out forwards;
}

jQuery（重置状态+控制动画流程）

// 封装重置函数：清除所有动画类，恢复初始状态
function resetAnimation() {
  $(".top, .middle, .bottom")
    .removeClass("forward reverse")
    .css("opacity", function() {
      return $(this).hasClass("top") ? 1 : 0;
    });
}

$(".top").on("mouseenter", function() {
  // 先重置上一次的动画状态，保证每次hover都是全新的动画流程
  resetAnimation();

  // 启动正向动画序列
  $(this).addClass("forward");
  $(".middle").addClass("forward");
  $(".bottom").addClass("forward");

  // 监听正向动画结束（用one()绑定单次事件，避免重复触发）
  $(".bottom").one("webkitAnimationEnd mozAnimationEnd animationend", function() {
    // 启动反向动画序列
    $(this).addClass("reverse");
    $(".middle").addClass("reverse");
    $(".top").addClass("reverse");

    // 监听反向动画结束，再次重置状态以便下次hover
    $(".top").one("webkitAnimationEnd mozAnimationEnd animationend", function() {
      resetAnimation();
    });
  });
});

关键优化点说明 #

1. 替换display: none为opacity: 0：让元素始终存在于DOM中，动画可以平滑触发，不会出现瞬间闪烁的问题。
2. 重置函数resetAnimation()：每次hover前清除所有动画类，恢复初始的透明度状态，确保动画可以重复运行。
3. 用one()绑定动画结束事件：避免重复绑定导致的多次触发问题，保证每次正向动画结束后只执行一次反向动画。
4. 优化关键帧时间线：调整百分比节点，让三张图片的淡入淡出衔接更自然，避免出现空白或重叠的突兀感。

方案与关键帧的优化建议 #

现有方案是否最优？

CSS关键帧 + jQuery控制流程的方案是轻量且可行的，适合不需要复杂动画逻辑的场景。但如果需要更精细的时间控制、循环动画或更好的兼容性，推荐：

• GSAP（GreenSock Animation Platform）：专业动画库，能轻松控制动画序列、时间偏移、缓动效果，代码更简洁，兼容性更强。
• CSS Transition替代关键帧：如果只是简单的淡入淡出，也可以用transition结合jQuery切换类，代码更精简，但控制多元素序列动画的灵活性不如关键帧。

平滑变形需要更多关键帧吗？

你的需求是图片依次淡入淡出，当前的关键帧已经足够实现平滑过渡。如果想要更细腻的效果，可以：

• 增加关键帧的中间节点（比如50%、80%等），让透明度变化更平缓。
• 尝试自定义缓动函数（比如cubic-bezier(0.42, 0, 0.58, 1)），适配不同的动画节奏。
• 如果是形状变形（而非图片切换），则需要结合CSS transform或SVG变形，但你的场景是图片切换，淡入淡出的关键帧完全足够。

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