使用CSS3进行文本渐隐动画效果

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

@keyframes规则可以与opacity属性一起使用，通过定义关键帧的样式来控制渐隐CSS动画序列。样式的改变将在关键字“from”和“to”之间发生。

如果我们将opacity从0到1进行定义，则0被认为是动画的开始（模糊），1是动画的结束（完全可见）。
如果我们将opacity从1到0进行定义，则它就是上述渐隐动画的逆过程。

示例

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

在这里，我们使用@keyframes规则来定义一个关键帧动画（“fade-in”），它从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过渡属性创建了一个文字的渐变效果。

起初，文字的不透明度设置为0，即透明。然后，我们使用过渡属性来在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属性创建了一个渐隐效果，用于文字 − fade-out

首先，将文字的透明度设置为1，使其完全可见。然后，我们使用过渡属性在1秒的持续时间内动画变化透明度，使用了ease-out的时间函数。

现在，当我们将鼠标悬停在文字上时，文字将过渡到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>