简单的CSS动画循环 - 衰落和放大器;出＆QUOT;装载和QUOT;文本 [英] Simple CSS Animation Loop – Fading In & Out "Loading" Text

问题描述

不启用Javascript，我想做出进出变淡文本的简单循环CSS动画类，无限。我不知道了很多关于CSS动画，所以我还没有想通出来呢，但这里有多远，我已经得到了：

  @keyframes flickerAnimation {/ *火焰脉冲* /
  0％{不透明度：1; }
  50％{不透明度：0; }
  100％{不透明度：1; }
}
.animate闪烁{
    不透明度：1;
    动画：flickerAnimation 1S无限;
}
 

解决方案

由于景景说，你必须添加特定浏览器preFIX。这应该涵盖大多数的浏览器：

  @keyframes flickerAnimation {
  0％{不透明度：1; }
  50％{不透明度：0; }
  100％{不透明度：1; }
}
@ -o-关键帧fli​​ckerAnimation {
  0％{不透明度：1; }
  50％{不透明度：0; }
  100％{不透明度：1; }
}
@ -moz-关键帧fli​​ckerAnimation {
  0％{不透明度：1; }
  50％{不透明度：0; }
  100％{不透明度：1; }
}
@ -webkit-关键帧fli​​ckerAnimation {
  0％{不透明度：1; }
  50％{不透明度：0; }
  100％{不透明度：1; }
}
.animate闪烁{
   -webkit-动画：flickerAnimation 1S无限;
   -moz-动画：flickerAnimation 1S无限;
   -o-动画：flickerAnimation 1S无限;
    动画：flickerAnimation 1S无限;
}
 

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

解决方案

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

这篇关于简单的CSS动画循环 - 衰落和放大器;出＆QUOT;装载和QUOT;文本的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！