简单的 CSS 动画循环——淡入淡出输出“加载"文本 [英] Simple CSS Animation Loop – Fading In & Out "Loading" Text

问题描述

没有Javascript，我想制作一个简单的循环CSS动画类，无限地淡入淡出文本.我对 CSS 动画了解不多，所以我还没有弄明白，但我已经做到了:

Without Javascript, I'd like to make a simple looping CSS animation class that fades text in and out, infinitely. I don't know a lot about CSS animations, so I haven't figured it out yet, but here's how far I've gotten:

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

推荐答案

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

As King King said, you must add the browser specific prefix. This should cover most browsers:

@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 动画循环——淡入淡出输出“加载"文本的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！