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-CSS Tutorial-php.cn

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

DDD

Release： 2024-10-26 12:54:29

Original

964 people have browsed it

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 CSS: Solving the Compatibility Issue
* Making Text

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

Copy after login

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

Copy after login

Use the updated code with the following HTML:

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

Copy after login

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!