以下是一些适合您提供的内容的问题式标题： * CSS 动画循环：如何在没有 JavaScript 的情况下无限淡入和淡出文本？ * 在 CS 中为文本创建无限淡入循环-css教程-PHP中文网

以下是一些适合您提供的内容的问题式标题： * CSS 动画循环：如何在没有 JavaScript 的情况下无限淡入和淡出文本？ * 在 CS 中为文本创建无限淡入循环

DDD

发布： 2024-10-26 12:54:29

原创

1037 人浏览过

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

简单的 CSS 动画循环：淡入淡出“加载”文本

问题

如何创建无限CSS 动画中的循环可以在不使用 JavaScript 的情况下淡入和淡出文本？尽管尝试过，问题仍未解决：

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

登录后复制

答案

为了确保跨浏览器的兼容性，请在 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;
}

登录后复制

使用更新的代码使用以下 HTML：

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

登录后复制

以上是以下是一些适合您提供的内容的问题式标题： * CSS 动画循环：如何在没有 JavaScript 的情况下无限淡入和淡出文本？ * 在 CS 中为文本创建无限淡入循环的详细内容。更多信息请关注PHP中文网其他相关文章！