How to Create an Infinitely Looping Fading Animation for \"Loading\" Text with CSS?

Creating a CSS-only Animation Loop for Fading "Loading" Text

In this tutorial, we aim to create a CSS animation that simulates a fading "Loading" text without using JavaScript.

Problem Statement:

You have created a basic CSS animation using keyframes, but it's not looping and fading in and out infinitely.

Solution:

To create a looping animation, add the animation-iteration-count and animation-direction properties. animation-iteration-count specifies the number of times the animation should repeat, while animation-direction determines whether the animation should play forwards or reverse.

Next, you must include browser-specific prefixes for better compatibility.

The modified code below incorporates these changes:

<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>

Usage:

Apply the animate-flicker class to the element where you want the "Loading" text to appear:

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

This will create an infinite animation that fades the text in and out continuously.

The above is the detailed content of How to Create an Infinitely Looping Fading Animation for \"Loading\" Text with CSS?. For more information, please follow other related articles on the PHP Chinese website!