Here are a few question-style titles that fit your provided content: * CSS Animation Loop: How to Fade Text In and Out Infinitely without JavaScript? * Creating an Infinite Fading Loop for Text in CS

Simple CSS Animation Loop: Fading In and Out "Loading" Text

Question

How do you create an infinite loop in CSS animation that fades text in and out without using JavaScript? Despite trying, the issue remains unresolved:

@keyframes flickerAnimation { /* flame pulses */
  0%   { opacity:1; }
  50%  { opacity:0; }
  100% { opacity:1; }
}
.animate-flicker {
    opacity:1;  
    animation: flickerAnimation 1s infinite;
}

Answer

To ensure compatibility across browsers, include vendor prefixes in your 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;
   -moz-animation: flickerAnimation 1s infinite;
   -o-animation: flickerAnimation 1s infinite;
    animation: flickerAnimation 1s infinite;
}

Use the updated code with the following HTML:

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

The above is the detailed content of Here are a few question-style titles that fit your provided content: * CSS Animation Loop: How to Fade Text In and Out Infinitely without JavaScript? * Creating an Infinite Fading Loop for Text in CS. For more information, please follow other related articles on the PHP Chinese website!