Simple CSS Animation Loop: Fade In & Out "Loading" Text

To create a looping animation in CSS that fades in and out text without using JavaScript, consider the following:

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

The @keyframes rule defines the animation itself. In this case, the animation simply changes the opacity of the element from fully opaque to fully transparent and back again.

.animate-flicker {
    opacity:1;  
    animation: flickerAnimation 1s infinite;
}

The .animate-flicker class applies the animation to any element with that class. The animation property specifies the name of the animation, the duration of each iteration (in this case, 1 second), and whether the animation should repeat infinitely.

One thing to note is that the code above may not work in all browsers. To ensure compatibility with a wider range of browsers, you need to add the appropriate vendor prefixes to the animation property. For example:

.animate-flicker {
   -webkit-animation: flickerAnimation 1s infinite;
   -moz-animation: flickerAnimation 1s infinite;
   -o-animation: flickerAnimation 1s infinite;
    animation: flickerAnimation 1s infinite;
}

With these vendor prefixes added, the animation should work in most modern browsers.