首页 > 文章 > 前端

CSS文字淡入淡出效果实现教程

时间：2025-12-26 11:18:54 464浏览收藏

偷偷努力，悄无声息地变强，然后惊艳所有人！哈哈，小伙伴们又来学习啦~今天我将给大家介绍《CSS文字淡入淡出动画实现方法》，这篇文章主要会讲到等等知识点，不知道大家对其都有多少了解，下面我们就一起来看一吧！当然，非常希望大家能多多评论，给出合理的建议，我们一起学习，一起进步！

使用Animate.css可快速实现文字淡入淡出。1. 通过CDN引入库；2. 添加animate__animated animate__fadeIn类实现淡入；3. 结合JavaScript动态添加animate__fadeOut类并设置动画结束后的隐藏状态；4. 可通过定时器实现自动淡出及循环播放，注意重置动画时需移除旧类并触发重排。合理运用可提升页面视觉体验。

css网页文字淡入淡出动画怎么做_使用Animate.css fadeIn fadeOut类

想让网页文字实现淡入淡出动画效果，使用 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 控制类的添加与移除，就能轻松实现文字的淡入淡出效果。不复杂但容易忽略细节，比如动画完成后的状态处理和重复播放的重置。合理运用，能提升页面交互的视觉体验。

到这里，我们也就讲完了《CSS文字淡入淡出效果实现教程》的内容了。个人认为，基础知识的学习和巩固，是为了更好的将其运用到项目中，欢迎关注golang学习网公众号，带你了解更多关于CSS动画的知识点！

CSS动画