如何使用CSS为“加载”文本创建无限循环的淡入淡出动画？

创建一个纯 CSS 动画循环来淡入淡出“加载”文本

在本教程中，我们的目标是创建一个模拟的 CSS 动画不使用 JavaScript 的淡入淡出“正在加载”文本。

问题陈述：

您已经使用关键帧创建了一个基本的 CSS 动画，但它没有循环和淡入淡出

解决方案：

要创建循环动画，请添加animation-iteration-count 和animation-direction 属性。 animation-iteration-count 指定动画应重复的次数，而animation-direction 确定动画应向前还是向后播放。

接下来，您必须包含特定于浏览器的前缀以获得更好的兼容性。

下面修改后的代码包含以下更改：

<code class="css">@keyframes flickerAnimation {
  0%   { opacity: 1; }
  50%  { opacity: 0; }
  100% { opacity: 1; }
}

@-o-keyframes flickerAnimation {
  0%   { opacity: 1; }
  50%  { opacity: 0; }
  100% { opacity: 1; }
}

@-moz-keyframes flickerAnimation {
  0%   { opacity: 1; }
  50%  { opacity: 0; }
  100% { opacity: 1; }
}

@-webkit-keyframes flickerAnimation {
  0%   { opacity: 1; }
  50%  { opacity: 0; }
  100% { opacity: 1; }
}

.animate-flicker {
  -webkit-animation: flickerAnimation 1s infinite normal;
  -moz-animation: flickerAnimation 1s infinite normal;
  -o-animation: flickerAnimation 1s infinite normal;
  animation: flickerAnimation 1s infinite normal;
}</code>

用法：

将 animate-flicker 类应用到您想要“加载”的元素" 要出现的文本：

<code class="html"><div class="animate-flicker">Loading...</div></code>

这将创建一个无限动画，使文本连续淡入和淡出。

以上是如何使用CSS为“加载”文本创建无限循环的淡入淡出动画？的详细内容。更多信息请关注PHP中文网其他相关文章！