javascript - 加载时的 CSS3 动画计时

Question

我目前有一个旋转背景图像的 css3 动画。问题是，我需要动画的时间相当长，这样它们就不会分散注意力，这会在页面加载时以黑色背景反射(reflect)出来，直到第一张幻灯片缓和为止。这是我所拥有的:

.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 秒后发生。

而且，一旦开始，一切都保持不变。 (元素之间的延迟保持不变)