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

Question

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

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

Answer 1

http://www.w3schools.com/cssref/css3_pr_animation-keyframes.asp

这实际上是一个浏览器问题...使用 -webkit- for chrome

Answer 2

正如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>

Answer 3

很好地寻找一个更简单的变体，我发现了这个：

它真的很聪明，我猜你可能也想添加其他浏览器变体，尽管它在 Chrome 和 Firefox 上都适用于我。

演示和信用 => http://codepen.io/Ahrengot/pen/bKdLC

@keyframes fadeIn { 
  from { opacity: 0; } 
}

.animate-flicker {
    animation: fadeIn 1s infinite alternate;
}

<h2 class="animate-flicker">Jump in the hole!</h2>

Answer 4

让多个元素依次淡入/淡出，比如5个元素每4秒淡入，

1- 为每个元素制作独特的动画，animation-duration 等于 [ 4s（每个元素的持续时间）* 5（元素数量）] = 20 秒

animation-name: anim1 , anim2, anim3 ... 
animation-duration : 20s, 20s, 20s ... 

2- 获取每个元素的动画关键帧。

100% (keyframes percentage) / 5 (elements) = 20% (frame for each element)

3- 定义每个动画的起点和终点：

每个动画都有 20% 的帧长度，@keyframes 百分比总是从​​ 0% 开始， 所以第一个动画将从0％开始并在他的帧（20％）结束， 并且每个下一个动画将从上一个动画结束点开始，并在到达他的帧时结束（+ 20％），

@keyframes animation1 { 0% {}, 20% {}}
@keyframes animation2 { 20% {}, 40% {}}
@keyframes animation3 { 40% {}, 60% {}}
and so on

现在我们需要让每个动画的不透明度从0淡入到1，从1到0淡出，

所以我们将在开始之后和结束点之前为每个动画添加另外 2 个点（步骤）以处理完全不透明度（1）

http://codepen.io/El-Oz/pen/WwPPZQ

.slide1 {
    animation: fadeInOut1 24s ease reverse forwards infinite
}

.slide2 {
    animation: fadeInOut2 24s ease reverse forwards infinite
}

.slide3 {
    animation: fadeInOut3 24s ease reverse forwards infinite
}

.slide4 {
    animation: fadeInOut4 24s ease reverse forwards infinite
}

.slide5 {
    animation: fadeInOut5 24s ease reverse forwards infinite
}

.slide6 {
    animation: fadeInOut6 24s ease reverse forwards infinite
}

@keyframes fadeInOut1 {
    0% { opacity: 0 }
    1% { opacity: 1 }
    14% {opacity: 1 }
    16% { opacity: 0 }
}

@keyframes fadeInOut2 {
    0% { opacity: 0 }
    14% {opacity: 0 }
    16% { opacity: 1 }
    30% { opacity: 1 }
    33% { opacity: 0 }
}

@keyframes fadeInOut3 {
    0% { opacity: 0 }
    30% {opacity: 0 }
    33% {opacity: 1 }
    46% { opacity: 1 }
    48% { opacity: 0 }
}

@keyframes fadeInOut4 {
    0% { opacity: 0 }
    46% { opacity: 0 }
    48% { opacity: 1 }
    64% { opacity: 1 }
    65% { opacity: 0 }
}

@keyframes fadeInOut5 {
    0% { opacity: 0 }
    64% { opacity: 0 }
    66% { opacity: 1 }
    80% { opacity: 1 }
    83% { opacity: 0 }
}

@keyframes fadeInOut6 {
    80% { opacity: 0 }
    83% { opacity: 1 }
    99% { opacity: 1 }
    100% { opacity: 0 }
}

Answer 5

我刚刚在 React 中使用了它，它可以工作： css：

#hightlight {
  animation: fadein 2s infinite;
}
@keyframes fadein {
  from { opacity: 0}
  to   { opacity: 1}
}

HTML：

<h1 id="hightlight"> hello </h1>