使用CSS动画逐个显示div
在我的产品中，当用户等待操作完成时，我会显示一条加载消息。为了让他们等待，我们展示了您是否知道让他们等待的事实 最初，我将消息设置为使用jQuery，但只需要将此功能转换为CSS使用CSS动画逐个显示div,css,animation,display,Css,Animation,Display,在我的产品中，当用户等待操作完成时，我会显示一条加载消息。为了让他们等待，我们展示了您是否知道让他们等待的事实 最初，我将消息设置为使用jQuery，但只需要将此功能转换为CSS <span class="quotes">Message 1</span> <span class="quotes">Message 2</span> <span class="quotes">Mes
<span class="quotes">Message 1</span>
<span class="quotes">Message 2</span>
<span class="quotes">Message 3</span>
<span class="quotes">Message 4</span>
<span class="quotes">Message 5</span>
<span class="quotes">Message 6</span>
<span class="quotes">Message 7</span>
...
<span class="quotes">Message 12</span>
<script>
(function() {
var quotes = $(".quotes");
var quoteIndex = -1;
function showNextQuote() {
++quoteIndex;
quotes.eq(quoteIndex % quotes.length)
.fadeIn(2000)
.delay(5000)
.fadeOut(2000, showNextQuote);
}
showNextQuote();
})();</script>
消息1
信息2
信息3
信息4
信息5
信息6
信息7
...
信息12
（功能（）{
var报价=$（“.quotes”）；
var quoteIndex=-1；
函数showNextQuote（）{
++报价索引；
quotes.eq（quoteIndex%quotes.length）
fadeIn先生（2000年）
.延迟（5000）
.fadeOut（2000年，showNextQuote）；
}
showNextQuote（）；
})();
此代码允许消息逐个显示，并且在每个消息之前都有一个fadeIn和fadeOut动画。我们可以为每个quote元素提供相同的动画，淡入、显示和淡出，然后保持淡出，而其他元素依次显示。我们只是让他们在错开的时间开始他们的动画 下面是一个片段来展示这个想法。显然，如果报价数量或所需时间间隔发生变化，则需要重新计算。理论上，这大部分可以使用CSS变量完成，但目前似乎不可能使用CSS calc在关键帧中指定%s
/*有一天我们可能会使用CSS变量进行动画的%计算
目前，我们根据以下公式提前计算：
numquotes=12
fadingin=2s；
显示=5s；
衰减=2s；
持续时间=（淡入+显示+淡出）*numquotes
*/
.quoteswrapper{
位置：相对位置；
}
.引用{
位置：绝对位置；
不透明度：0；
动画名称：fadeinout；
动画持续时间：108s；/*=（渐减+显示+渐减）*numquotes*/
动画迭代次数：无限；
}
@关键帧淡入淡出{
0% {
不透明度：0；
}
1.85%{/*=衰减/持续时间*100%*/
不透明度：1；
}
4.63%{/*=（发散+显示）/持续时间*100%*/
不透明度：1；
}
6.48%{/*=（衰减+显示+衰减）/持续时间*100%*/
不透明度：0；
}
100% {
不透明度：0；
}
}
.quotes:n子（1）{动画延迟：0s；}/*延迟=（n-1）/numquotes*持续时间*/
.quotes:n子（2）{动画延迟：9s；}
.quotes:n子（3）{动画延迟：18s；}
.quotes:n子（4）{动画延迟：27s；}
.quotes:n子（5）{动画延迟：36s}
.quotes:n子（6）{动画延迟：45s；}
.quotes:n子（7）{动画延迟：54s；}
.quotes:n子（8）{动画延迟：63s；}
.quotes:n子（9）{动画延迟：72s；}
.quotes:n子（10）{动画延迟：81s；}
.quotes:n子（11）{动画延迟：90秒；}
.quotes:n子（12）{动画延迟：99s；}
信息1
信息2
信息3
信息4
信息5
信息6
信息7
信息8
信息9
信息10
信息11
信息12