简单的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

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

正在寻找一个更简单的变化我发现了这个:

它真的很聪明,我想你可能也想添加其他浏览器版本,虽然它在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 3

要使多个元素依次淡入/淡出，例如每 4 秒淡入 5 个元素，

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

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