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

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

DDD原创: 2024-10-26 12:54:29965浏览

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中文网其他相关文章！

JavaScript css for animation issue

声明：

本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系admin@php.cn

上一篇：How to Make a Div Take Up Remaining Space After a Fixed Width Div?下一篇：Why Doesn\'t `margin: auto;` Work on Inline-Block Elements?

查看更多