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

如果没有 Javascript，我想创建一个简单的循环 CSS 动画类，它可以无限地淡入淡出文本。关于 CSS 动画我知道的不多，所以我还没弄明白，但是我已经做了这么多:

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

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

it is actually a browser issue... use -webkit- for chrome

小开
最佳答案

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>

小开

well looking for a simpler variation I found this:

it's truly smart, and I guess you might want to add other browsers variations too although it worked for me both on Chrome and Firefox.

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

小开

To make more than one element fade in/out sequentially such as 5 elements fade each 4s,

1- make unique animation for each element with animation-duration equal to [ 4s (duration for each element) * 5 (number of elements) ] = 20s

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

2- get animation keyframe for each element.

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

3- define starting and ending point for each animation:

each animation has 20% frame length and @keyframes percentage always starts from 0%, so first animation will start from 0% and end in his frame(20%), and each next animation will starts from previous animation ending point and end when it reach his frame (+20% ),

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

now we need to make each animation fade in from 0 to 1 opacity and fade out from 1 to 0,

so we will add another 2 points (steps) for each animation after starting and before ending point to handle the full opacity(1)

enter image description here

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

I just used this in React and it works: css:

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

HTML:

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

提交答案