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

• Z时代
• 2024-01-10
• 分类：问答

如果没有Javascript，我想制作一个简单的循环CSS动画类，以使文本无限地淡入和淡出。我对CSS动画了解不多，所以我还没有弄清楚，但是这是我的发展目标：

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

回答：

正如King King所说，您必须添加浏览器特定的前缀。这应该涵盖大多数浏览器：

@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;
}
<div class="animate-flicker">Loading...</div>

以上是 简单的CSS动画循环–淡入和淡出“加载”文本 的全部内容， 来源链接： utcz.com/qa/428083.html