CSS 简单的CSS动画循环-淡入淡出“加载”文字

在本文中，我们将介绍如何使用CSS实现一个简单的动画循环，使文字在过渡中淡入和淡出，实现一个“加载”文字的特效。

阅读更多：CSS 教程

CSS Animation基础知识

在开始之前，我们需要了解一些CSS动画的基础知识。

CSS动画是通过在样式中应用关键帧来实现的。关键帧定义了动画的每个阶段的样式。我们可以通过@keyframes规则来创建关键帧。

下面是一个简单的关键帧动画示例：

@keyframes example-animation {
  0% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.5);
  }
  100% {
    transform: scale(1);
  }
}

在上面的代码中，我们定义了一个名为example-animation的关键帧动画。这个动画在0%的位置应用了transform: scale(1)样式，在50%的位置应用了transform: scale(1.5)样式，在100%的位置应用了transform: scale(1)样式。这样就实现了一个在动画过程中元素从标准大小到1.5倍大小再返回到标准大小的效果。

创建淡入淡出“加载”文字动画

现在我们来创建一个简单的淡入淡出“加载”文字的动画。

首先，我们需要一个显示“加载”文字的HTML元素。我们可以使用一个<div>元素来实现，例如：

<div class="loading-text">
  加载中...
</div>

接下来，我们需要使用CSS来定义这个文字的样式和动画。首先，我们将为.loading-text类添加样式，使其居中并设置字体大小和颜色：

.loading-text {
  text-align: center;
  font-size: 20px;
  color: #333;
}

然后，我们将为.loading-text类添加关键帧动画fade-in-out，使文字在过渡中淡入和淡出。动画持续时间为1秒，循环次数为无限次：

.loading-text {
  animation: fade-in-out 1s infinite;
}

@keyframes fade-in-out {
  0% {
    opacity: 0;
  }
  50% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}

在上面的代码中，我们定义了一个名为fade-in-out的关键帧动画。这个动画在0%的位置设置文字的透明度为0，使其完全透明，在50%的位置设置透明度为1，使其完全可见，最后在100%的位置再次将透明度设置为0。这样就实现了一个在动画过程中文字在淡入和淡出之间循环的效果。

示例演示

现在让我们来看一下实际例子，如何将上面的CSS应用到一个网页中。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>CSS Animation Example</title>
  <style>
    .loading-text {
      text-align: center;
      font-size: 20px;
      color: #333;
      animation: fade-in-out 1s infinite;
    }

    @keyframes fade-in-out {
      0% {
        opacity: 0;
      }
      50% {
        opacity: 1;
      }
      100% {
        opacity: 0;
      }
    }
  </style>
</head>
<body>
  <div class="loading-text">
    加载中...
  </div>
</body>
</html>

将上面的代码保存为一个HTML文件，然后在浏览器中打开这个文件，您将看到一个带有文字“加载中…”的网页，文字将在过渡中淡入和淡出，实现了我们想要的效果。