使用 CSS3 实现文本淡入淡出动画效果

cssweb developmentfront end technology更新于 2025/2/17 23:40:17

淡入淡出是两种可见状态之间逐渐过渡的视觉表现。我们可以使用 CSS3 中的 @keyframes 规则和 opacity 属性来实现这种淡入淡出动画。

@keyframes 规则可以与 opacity 属性结合使用，通过定义关键帧的样式来控制 CSS 淡入淡出动画序列。样式变化将通过关键字"from"和"to"来实现。

如果我们将 opacity 定义为 from 0 to 1;则 0 表示动画开始(模糊)，1 表示动画结束(完全可见)。
如果我们将 opacity 定义为 from 1 to 0;与上述淡入淡出动画相反。

示例

在下面的示例中，我们使用 CSS @keyframes 规则和 animation 属性为文本创建淡入效果 -

在这里，我们使用 @keyframes 规则定义了一个关键帧动画("淡入")，其不透明度从 0 开始逐渐过渡到 1。然后，我们在文本上使用 animation 属性，并将持续时间设置为 3 秒。每当我们加载页面时，文本将在 3 秒内逐渐淡入。

<!DOCTYPE html>
<html>
<head>
   <title>Fading Text Animation Effect Using CSS3</title>
   <style>
      @keyframes fade-in {
         from {
            opacity: 0;
            /* Start with 0 opacity */
         }
         to {
            opacity: 1;
            /* transition to full opacity */
         }
      }
      h1 {
         animation: fade-in 3s;
      }
   </style>
</head>
<body>
   <h1 class="fade-in">Welcome to Tutorialspoint</h1>
</body>
</html>

示例

在以下示例中，我们使用 CSS transition 属性为文本创建淡入效果。

最初，文本的不透明度设置为 0，使其透明。然后，我们使用 transition 属性，通过 ease-in 定时函数，为不透明度的变化添加动画效果，持续时间为 1 秒。

现在，当我们将鼠标悬停在文本上时，文本将过渡到完全不透明度。换句话说，文本将可见。

<!DOCTYPE html>
<html>
<head>
   <title>Fade-In Effect</title>
   <style>
      .fade-in {
         opacity: 0;
         /* Start with 0 opacity */
         transition: opacity 1s ease-in;
      }
      .fade-in:hover {
         opacity: 1;
         /* On hover, transition to full opacity */
      }
   </style>
</head>
<body>
   <h1 class="fade-in">Fade-In Effect</h1>
</body>
</html>

示例

在下面的例子中，我们使用 CSS @keyframes 规则和动画属性为文本创建淡出效果 -

<!DOCTYPE html>
<html>
<head>
   <title>Fading Text Animation Effect Using CSS3</title>
   <style>
      @keyframes fade-out {
         from {
            opacity: 1;
         }
         to {
            opacity: 0;
         }
      }
      .fade-out {
       animation: fade-out 3s;
      }
   </style>
</head>
<body>
   <h1 class="fade-out">Welcome to Tutorialspoint</h1>
</body>
</html>

示例

在以下示例中，我们使用 CSS transition 属性为文本创建淡出效果 -

最初，文本的不透明度设置为 1，使其完全可见。然后，我们使用 transition 属性，通过 ease-out 定时函数，为不透明度的变化添加动画效果，持续时间为 1 秒。

现在，当我们将鼠标悬停在文本上时，文本的不透明度将过渡到 0。换句话说，文本将逐渐淡出。

<!DOCTYPE html>
<html>
<head>
   <title>Fade-Out Effect</title>
   <style>
      .fade-out {
         opacity: 1;
         /* Start with full opacity */
         transition: opacity 1s ease-out;
      }
      .fade-out:hover {
         opacity: 0;
         /* On hover, transition to 0 opacity */
      }
   </style>
</head>
<body>
   <h1 class="fade-out">Welcome to Tutorialspoint</h1>
</body>
</html>