HTML/CSS轮播图文字动画失效问题求助

问题根源 #

你当前的文字动画类（slide-in-left/slide-in-right）仅在页面加载时执行一次。后续幻灯片在初始加载时被前面的slide覆盖处于不可见状态，动画执行时用户无法感知；当它们轮播到可视区域时，动画早已结束，因此看不到效果。同时你后续的幻灯片未添加动画类，也会导致无动画。

修复方案 #

方案1：纯CSS同步动画周期 #

利用父元素（slide）的轮播动画时间线，将文字动画与轮播周期绑定，实现每次slide显示时文字动画自动重放。

步骤1：补全所有slide的文字动画类

修改HTML，给所有slide内的标题和副标题添加对应动画类：

<div class="slider">
  <div class="slide">
    <p class="slider-title slide-in-left">discover OUR portofolio</p>
    <p class="slider-subtitle slide-in-right">YEAR OF EXPERIENCE IN THE PHOTO INDUSTRY</p>
  </div>
  <div class="slide">
    <p class="slider-title slide-in-left">Featured design project</p>
    <p class="slider-subtitle slide-in-right">PHOTOGRAPHY, ART DIRECTOR AND MORE</p>
  </div>
  <div class="slide">
    <p class="slider-title slide-in-left">true beauty and style</p>
    <p class="slider-subtitle slide-in-right">LETS COLLABORATE</p>
  </div>
  <div class="slide">
    <p class="slider-title slide-in-left">welcome to SON photography</p>
    <p class="slider-subtitle slide-in-right">CLICK TO DISCOVER THE WORLD OF SHANE</p>
  </div>
  <div class="slide">
    <p class="slider-title slide-in-left">ok, it's time to click on menu</p>
    <p class="slider-subtitle slide-in-right">LETS CLICK</p>
  </div>
</div>

步骤2：修改动画配置并添加延迟

调整文字动画为无限循环，时长与轮播总周期（17.5s）一致，再为每个slide的文字设置对应延迟，确保动画在slide显示后触发：

/* 修改基础动画类，设置无限循环 */
.slide-in-left {
  animation: slideLeft 1s ease-in-out infinite;
  animation-fill-mode: forwards;
  opacity: 0;
  transform: translateX(-100%);
}

.slide-in-right {
  animation: slideRight 1s ease-in-out infinite;
  animation-fill-mode: forwards;
  opacity: 0;
  transform: translateX(100%);
}

/* 为每个slide的文字设置动画延迟，与轮播周期同步 */
.slide:nth-child(1) .slide-in-left,
.slide:nth-child(1) .slide-in-right {
  animation-delay: 0.2s; /* 延迟0.2s让slide完全显示后再开始动画 */
}

.slide:nth-child(2) .slide-in-left,
.slide:nth-child(2) .slide-in-right {
  animation-delay: calc(3.5s + 0.2s); /* 第2个slide间隔3.5s显示 */
}

.slide:nth-child(3) .slide-in-left,
.slide:nth-child(3) .slide-in-right {
  animation-delay: calc(7s + 0.2s);
}

.slide:nth-child(4) .slide-in-left,
.slide:nth-child(4) .slide-in-right {
  animation-delay: calc(10.5s + 0.2s);
}

.slide:nth-child(5) .slide-in-left,
.slide:nth-child(5) .slide-in-right {
  animation-delay: calc(14s + 0.2s);
}

方案2：JavaScript动态控制动画 #

通过监听幻灯片的可视状态，动态添加/移除动画类，适合需要动态增减slide的场景：

const slides = document.querySelectorAll('.slide');

function updateSlideAnimations() {
  slides.forEach(slide => {
    const isVisible = slide.getBoundingClientRect().left <= 0 && slide.getBoundingClientRect().right >= window.innerWidth;
    const title = slide.querySelector('.slider-title');
    const subtitle = slide.querySelector('.slider-subtitle');

    if (isVisible) {
      title.classList.add('slide-in-left');
      subtitle.classList.add('slide-in-right');
    } else {
      // 移除动画类并强制重绘，重置动画状态
      title.classList.remove('slide-in-left');
      subtitle.classList.remove('slide-in-right');
      void title.offsetWidth;
      void subtitle.offsetWidth;
    }
  });
}

// 初始检测
updateSlideAnimations();
// 周期性检测slide状态，间隔小于轮播切换时间
setInterval(updateSlideAnimations, 500);

该方案不需要依赖CSS延迟计算，动画触发时机更精准。

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