使用Animate.css可快速实现文字淡入淡出。1. 通过CDN引入库；2. 添加animate__animated animate__fadeIn类实现淡入；3. 结合JavaScript动态添加animate__fadeOut类并设置动画结束后的隐藏状态；4. 可通过定时器实现自动淡出及循环播放，注意重置动画时需移除旧类并触发重排。合理运用可提升页面视觉体验。
想让网页文字实现淡入淡出动画效果，使用 Animate.css 是最简单高效的方法之一。Animate.css 提供了现成的 fadeIn 和 fadeOut 动画类，只需引入库并添加对应 class 即可快速实现。
1. 引入 Animate.css 库
在 HTML 文件的 中通过 CDN 引入 Animate.css：<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css"/>这样就能使用所有 Animate.css 提供的动画效果。
2. 使用 fadeIn 显示文字
让文字从透明逐渐显现，使用 animate__animated animate__fadeIn 类：<p class="animate__animated animate__fadeIn">这段文字会淡入显示</p>默认动画时长为 1 秒，可通过 CSS 调整：
style="animation-duration: 2s;"
3. 实现 fadeOut 隐藏文字（配合 JavaScript）
fadeOut 不是自动触发的，需要通过 JS 动态添加类来实现隐藏动画：- 先设置元素默认可见
- 通过事件（如点击、定时）添加 animate__fadeOut 类
- 动画结束后将元素隐藏（opacity 或 display）
<div id="text" class="animate__animated">点击后淡出</div>
<button onclick="fadeOutText()">淡出文字</button>
<script>
function fadeOutText() {
const el = document.getElementById('text');
el.classList.add('animate__fadeOut');
// 动画持续 1 秒，结束后隐藏元素
setTimeout(() => {
el.style.opacity = 0;
}, 1000);
}
</script>
4. 淡入后自动淡出（循环或定时动画）
如果希望文字出现几秒后自动消失，可以组合使用：setTimeout(() => {
el.classList.remove('animate__fadeIn');
el.classList.add('animate__fadeOut');
setTimeout(() => el.style.display = 'none', 1000);
}, 3000); // 3秒后开始淡出
注意：每次重新播放动画前，需移除旧类并强制重绘，例如：
el.classList.remove('animate__fadeOut');
el.offsetHeight; // 触发重排
el.classList.add('animate__fadeIn');
基本上就这些。使用 Animate.css 的 fadeIn 和 fadeOut 类，结合简单的 JavaScript 控制类的添加与移除，就能轻松实现文字的淡入淡出效果。不复杂但容易忽略细节，比如动画完成后的状态处理和重复播放的重置。合理运用，能提升页面交互的视觉体验。
