求助：如何让CSS、jQuery、HTML实现的文字飞入动画持续循环？

嘿，我懂你遇到的问题了——你现在的代码只是在页面加载后触发了一次文字飞入，但没做循环的逻辑对吧？别担心，给你两种靠谱的解决方案，分别用纯CSS和jQuery来实现持续循环的文字飞入动画：

方案一：纯CSS实现无限循环（推荐，性能更优） #

如果你的动画逻辑不复杂，纯CSS就能搞定无限循环，不需要JS介入。核心是用animation属性的infinite值，同时在关键帧里让元素回到类似初始的状态，保证循环流畅：

CSS 代码 #

#fly-in {
  position: absolute;
  left: 50%;
  top: 50%;
  list-style: none;
  transform: translateX(-50%) translateY(-50%);
}

.fly-in li {
  display: inline-block;
  margin-right: 30px;
  /* 定义动画：名称 时长 缓动方式 初始延迟 无限循环 */
  animation: flyIn 1.5s ease-in-out 0.7s infinite;
  /* 初始状态：透明+向下位移 */
  opacity: 0;
  transform: translateY(30px);
}

/* 给每个li设置不同延迟，实现依次飞入的效果 */
.fly-in li:nth-child(1) { animation-delay: 0.7s; }
.fly-in li:nth-child(2) { animation-delay: 0.9s; }
.fly-in li:nth-child(3) { animation-delay: 1.1s; }
.fly-in li:nth-child(4) { animation-delay: 1.3s; }

/* 定义飞入+淡出的关键帧，为循环做准备 */
@keyframes flyIn {
  0% {
    opacity: 0;
    transform: translateY(30px);
  }
  40% {
    opacity: 1;
    transform: translateY(0);
  }
  80% {
    opacity: 1;
    transform: translateY(0);
  }
  100% {
    opacity: 0;
    transform: translateY(-30px);
  }
}

HTML 代码 #

<ul id="fly-in" class="fly-in">
  <li>你</li>
  <li>好</li>
  <li>世</li>
  <li>界</li>
</ul>

这里的关键是在@keyframes的末尾让元素回到透明+位移状态，这样循环的时候不会出现突兀的跳转。

方案二：用jQuery控制循环（适合复杂逻辑） #

如果需要更灵活的控制（比如根据用户交互暂停/重启），可以用JS来重置动画状态，重复触发：

CSS 代码 #

#fly-in {
  position: absolute;
  left: 50%;
  top: 50%;
  list-style: none;
  transform: translateX(-50%) translateY(-50%);
}

.fly-in li {
  display: inline-block;
  margin-right: 30px;
  opacity: 0;
  transform: translateY(30px);
}

/* 飞入动画的激活类 */
.fly-in.active li {
  animation: flyIn 1s ease-in-out forwards;
}

/* 逐个延迟飞入 */
.fly-in.active li:nth-child(1) { animation-delay: 0.7s; }
.fly-in.active li:nth-child(2) { animation-delay: 0.9s; }
.fly-in.active li:nth-child(3) { animation-delay: 1.1s; }

/* 淡出动画，为循环重置做准备 */
.fly-in.fly-out li {
  animation: flyOut 0.5s ease-in-out forwards;
}

@keyframes flyIn {
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes flyOut {
  to {
    opacity: 0;
    transform: translateY(-30px);
  }
}

jQuery 代码 #

$(window).load(function() {
  // 定义循环函数
  function startFlyLoop() {
    // 触发飞入动画
    $('.fly-in').addClass('active');
    
    // 等待最后一个元素动画结束后，触发淡出
    setTimeout(function() {
      $('.fly-in').removeClass('active').addClass('fly-out');
      
      // 淡出完成后，重置状态并重新开始循环
      setTimeout(function() {
        $('.fly-in').removeClass('fly-out');
        startFlyLoop();
      }, 600); // 匹配淡出动画时长+一点缓冲时间
    }, 2000); // 总时长=最长的延迟时间+飞入动画时长
  }
  
  // 首次启动循环（延迟700ms和你原来的逻辑一致）
  setTimeout(startFlyLoop, 700);
});

这里的思路是：先触发飞入动画，等动画完全结束后，触发淡出动画，把元素重置回初始状态，然后再重新调用循环函数，实现持续播放。

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