如何实现文字淡入淡出轮播动画？

推荐开发库 #

• GSAP：功能强大的动画库，处理这类序列淡入淡出轮播非常顺手，支持精细的动画控制和跨浏览器兼容，只需几行代码就能实现复杂的轮播逻辑。
• Anime.js：轻量级动画库，API简洁直观，适合快速实现简单的文字轮播淡入淡出效果，体积小性能好。
• Swiper：虽然主打滑块轮播，但可以通过配置effect: 'fade'实现文字的淡入淡出切换，自带轮播控制、自动播放等功能，适合需要交互的场景。

原生实现思路 #

纯CSS方案（无需JS） #

适合固定内容的轮播，利用CSS动画的延迟和循环特性实现：

.text-carousel {
  position: relative;
  height: 40px; /* 根据文字高度调整 */
  overflow: hidden;
}

.text-item {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  opacity: 0;
  animation: fadeCycle 6s infinite ease-in-out;
}

/* 为每个文本项设置延迟，实现依次切换 */
.text-item:nth-child(1) { animation-delay: 0s; }
.text-item:nth-child(2) { animation-delay: 2s; }
.text-item:nth-child(3) { animation-delay: 4s; }

@keyframes fadeCycle {
  0%, 15% { opacity: 0; } /* 初始和结束阶段隐藏 */
  25%, 75% { opacity: 1; } /* 中间阶段显示 */
  85%, 100% { opacity: 0; } /* 过渡到隐藏 */
}

HTML结构：

<div class="text-carousel">
  <div class="text-item">第一个文本内容</div>
  <div class="text-item">第二个文本内容</div>
  <div class="text-item">第三个文本内容</div>
</div>

JS + CSS方案（灵活可控） #

如果需要动态修改轮播内容、控制播放/暂停，用JS配合CSS过渡实现：

<div class="text-carousel">
  <div class="text-item active">文本1</div>
  <div class="text-item">文本2</div>
  <div class="text-item">文本3</div>
</div>

.text-carousel {
  position: relative;
  height: 40px;
  overflow: hidden;
}

.text-item {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  opacity: 0;
  transition: opacity 0.5s ease; /* 淡入淡出过渡时长 */
}

.text-item.active {
  opacity: 1;
}

const textItems = document.querySelectorAll('.text-item');
let currentIndex = 0;
const intervalTime = 2000; // 切换间隔，单位毫秒

function switchText() {
  // 移除当前激活项的类
  textItems[currentIndex].classList.remove('active');
  // 更新索引，循环切换
  currentIndex = (currentIndex + 1) % textItems.length;
  // 给下一项添加激活类
  textItems[currentIndex].classList.add('active');
}

// 启动轮播
const carouselInterval = setInterval(switchText, intervalTime);

// 如需暂停，可调用 clearInterval(carouselInterval)

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