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所说，您必须添加浏览器特定的前缀。这应该涵盖大多数浏览器：

＆＃13;

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

＆＃13;

<div class="animate-flicker">Loading...</div>

＆＃13;

Answer 2

正在寻找一个更简单的变体，我发现了这个：

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

demo and credit =＆gt; 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

使多个元素依次淡入/淡出，例如5个元素逐渐淡出每个4s，

1-为每个元素制作独特的动画，animation-duration等于[ 4s （每个元素的持续时间）* 5 （元素数量）] < strong> = 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 }
}

Answer 4

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

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

Answer 5

我刚刚在 React 中使用了它并且它有效： css:

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

HTML：

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

简单的CSS动画循环 - 淡入＆amp;输出“加载”文本

5 个答案: