简单的 CSS 动画循环——淡入淡出“加载”文本
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/23985018/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Simple CSS Animation Loop – Fading In & Out "Loading" Text
提问by ac360
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:
如果没有 Javascript，我想制作一个简单的循环 CSS 动画类，无限地淡入淡出文本。我对 CSS 动画不太了解，所以我还没有弄清楚，但这是我已经走了多远：
@keyframes flickerAnimation { /* flame pulses */
0% { opacity:1; }
50% { opacity:0; }
100% { opacity:1; }
}
.animate-flicker {
opacity:1;
animation: flickerAnimation 1s infinite;
}
回答by touko
As King King said, you must add the browser specific prefix. This should cover most browsers:
正如 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>回答by azerafati
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.
它真的很聪明，我想您可能也想添加其他浏览器变体，尽管它在 Chrome 和 Firefox 上都对我有用。
demo and credit => http://codepen.io/Ahrengot/pen/bKdLC
演示和信用 => 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>回答by azerafati
To make more than one element fade in/out sequentially such as 5 elements fade each 4s,
要使多个元素依次淡入/淡出，例如每 4 秒淡入 5 个元素，
1- make unique animation for each element with animation-durationequal to [ 4s(duration for each element) * 5(number of elements) ] = 20s
1- 为每个元素制作独特的动画，animation-duration等于 [ 4s（每个元素的持续时间）* 5（元素数量）] = 20s
animation-name: anim1 , anim2, anim3 ...
animation-duration : 20s, 20s, 20s ...
2- get animation keyframe for each element.
2- 获取每个元素的动画关键帧。
100% (keyframes percentage) / 5 (elements) = 20% (frame for each element)
3- define starting and ending point for each animation:
3- 定义每个动画的起点和终点：
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% ),
每个动画都有 20% 的帧长，@keyframes 百分比总是从 0% 开始，所以第一个动画将从 0% 开始并在他的帧 (20%) 结束，每个下一个动画将从上一个动画结束点开始并在它结束时结束达到他的框架（+ 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,
现在我们需要让每个动画从 0 到 1 不透明度淡入，从 1 到 0 淡出，
so we will add another 2 points (steps) for each animation after starting and before ending point to handle the full opacity(1)
所以我们将在开始之后和结束点之前为每个动画添加另外 2 个点（步骤）以处理完全不透明度（1）
http://codepen.io/El-Oz/pen/WwPPZQ
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 }
}
回答by jBear Graphics
http://www.w3schools.com/cssref/css3_pr_animation-keyframes.asp
http://www.w3schools.com/cssref/css3_pr_animation-keyframes.asp
it is actually a browser issue... use -webkit- for chrome
它实际上是一个浏览器问题......使用 -webkit- for chrome
