如何使用纯CSS实现文本的淡入动画效果

纯CSS实现文本淡入动画的两种核心方案

文本淡入动画的核心原理是通过改变文本的透明度，从完全不可见过渡到完全可见，配合时间控制实现平滑的显示效果。纯CSS实现该效果主要有两种路径，分别是使用transition过渡属性和animation关键帧动画，下面分别介绍两种方案的实现方法。

方案一：使用transition过渡属性实现

transition适合实现简单的触发式淡入效果，比如鼠标悬停或者元素状态改变时触发。这种方式实现逻辑简单，适合对交互要求不复杂的场景。

首先编写基础的HTML结构，用来展示需要淡入的文本：

<div class="text-container">
  <p class="fade-text">这是一段使用transition实现淡入效果的文本</p>
</div>

对应的CSS代码如下，通过控制透明度变化和过渡时间实现淡入效果：

.text-container {
  padding: 20px;
  background-color: #f5f5f5;
}

.fade-text {
  /* 初始透明度为0，完全不可见 */
  opacity: 0;
  /* 设置过渡属性为opacity，过渡时间1秒，速度曲线为匀速 */
  transition: opacity 1s linear;
  font-size: 18px;
  color: #333;
}

/* 鼠标悬停在容器上时，文本透明度变为1，触发淡入 */
.text-container:hover .fade-text {
  opacity: 1;
}

如果需要页面加载时自动触发淡入，可以配合类名的切换实现，比如在页面加载完成后给文本添加active类：

<p class="fade-text active">页面加载后自动淡入的文本</p>

.fade-text {
  opacity: 0;
  transition: opacity 1s linear;
}

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

方案二：使用animation关键帧动画实现

animation适合实现自动触发、可控制循环次数、延迟时间的复杂淡入效果，不需要依赖外部状态触发，页面加载后即可自动执行。

HTML结构和方案一类似，只需要一个文本元素即可：

<p class="fade-in-text">这是一段使用animation实现自动淡入效果的文本</p>

CSS代码需要定义关键帧和动画属性，关键帧中设置透明度的变化过程：

/* 定义淡入关键帧，从透明度0到透明度1 */
@keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

.fade-in-text {
  /* 应用fadeIn动画，持续1秒，匀速，结束后保持结束状态 */
  animation: fadeIn 1s linear forwards;
  /* 可以设置动画延迟时间，比如延迟0.5秒后开始执行 */
  /* animation-delay: 0.5s; */
  font-size: 18px;
  color: #333;
}

如果需要文本淡入后保持透明度的变化，需要设置animation-fill-mode为forwards，否则动画结束后文本会回到初始的透明状态。如果需要动画循环执行，可以设置animation-iteration-count为infinite。

两种方案的对比与选择

两种方案各有适用场景，具体差异如下：

参数调整技巧

实际开发中可以根据需求调整相关参数，优化淡入效果：

• 调整持续时间：修改transition-duration或者animation-duration的值，比如设置为2s可以让淡入更缓慢
• 调整速度曲线：将linear改为ease-in（慢进快出）、ease-out（快进慢出）等，让淡入效果更自然
• 添加延迟：使用transition-delay或者animation-delay设置延迟时间，实现多个文本依次淡入的效果

如果需要实现多个文本依次淡入，可以给不同的文本设置不同的animation-delay值，比如第一个文本延迟0s，第二个延迟0.3s，第三个延迟0.6s，即可实现错峰淡入的效果。

CSS动画fade_inopacityanimationtransition修改时间：2026-06-20 01:24:24