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

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

加载CSS3动画时序

1 个答案: