How to Create a Looping \'Loading\' Text Fade Animation with Pure CSS?

Creating a Looping CSS Animation to Fade In & Out "Loading" Text

To achieve a continuous fading animation effect for the "Loading" text without using JavaScript, let's delve into the world of CSS animations. Here's how to do it:

Setting Up the Animation Keyframes

The @keyframes rule defines the animation's keyframes, specifying the opacity values at specific timestamps. In our case, we want the text to fade in and out.

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

Applying the Animation

We apply the animation to the desired HTML element using the CSS class name. The animation property takes the name of the keyframe animation and the duration.

<code class="css">.animate-flicker {
    opacity:1;  
    animation: flickerAnimation 1s infinite;
}</code>

Cross-Browser Compatibility

To ensure cross-browser compatibility, it's essential to include browser-specific prefixes for the animation property.

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

HTML Integration

Finally, add the HTML element with the class name to display the animated text.

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

Result

The animation will now continuously fade the "Loading" text in and out, creating a looping effect.

The above is the detailed content of How to Create a Looping \'Loading\' Text Fade Animation with Pure CSS?. For more information, please follow other related articles on the PHP Chinese website!