search

Home >Web Front-end >CSS Tutorial >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

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
DDDOriginal
2024-10-26 12:54:291043browse

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

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!

JavaScript css for animation issue
Statement：
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Previous article：How to Make a Div Take Up Remaining Space After a Fixed Width Div?Next article：How to Make a Div Take Up Remaining Space After a Fixed Width Div?

Related articles

See more