加载CSS3动画的时间

Question

我目前有一个CSS3动画，可以旋转背景图像。 问题是，我需要动画的时间很长，因此它们不会分散注意力，这在页面加载时会以黑色背景反映出来，直到第一个幻灯片放宽为止。这是我的目的：

.cb-slideshow li span {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0px;
    left: 0px;
    color: transparent;
    background-size: cover;
    background-position: 50% 50%;
    background-repeat: none;
    opacity: 0;
    z-index: 0;
    -webkit-backface-visibility: hidden;
    -webkit-animation: imageAnimation 144s linear infinite 0s;
    -moz-animation: imageAnimation 144s linear infinite 0s;
    -o-animation: imageAnimation 144s linear infinite 0s;
    -ms-animation: imageAnimation 144s linear infinite 0s;
    animation: imageAnimation 144s linear infinite 0s;
}
.cb-slideshow li:nth-child(1) span {
    background-image: url(../images/1.jpg)
}
.cb-slideshow li:nth-child(2) span {
    background-image: url(../images/2.jpg);
    -webkit-animation-delay: 24s;
    -moz-animation-delay: 24s;
    -o-animation-delay: 24s;
    -ms-animation-delay: 24s;
    animation-delay: 24;
}

什么是最好的调整方式，以便一开始就没有黑色背景？ 我应该有后台默认设置吗？ 我可以更改动画以使其非常快速地放宽第一张幻灯片，但在随后的迭代中恢复正常吗？

Answer 1

据我了解，您的动画持续了144秒。

然后，您有几个共享此动画的元素，第二个元素延迟了24秒。

因此，我想您有6个元素，其余的元素延迟为48、72，依此类推。

使第一个过渡更早的一种方法是将延迟设置得更高一些：

您有0、24、48、72、96、120。

将其设置为1，25，49，73，97，121。

第一次转换将在1秒后发生。

并且，一旦开始，一切都将保持不变。 （元素之间的延迟保持不变）