0

我目前有一个旋转背景图像的 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;
}

调整它以使一开始没有黑色背景的最佳方法是什么？我应该有背景默认值吗？我可以更改动画，以便它可以非常快速地缓和第一张幻灯片，但在接下来的迭代中恢复正常？

4

1 回答 1

0

据我了解，您的动画持续时间超过 144 秒。

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

所以，我猜你有 6 个元素，其余的元素在 48、72 等处延迟。

更早进行第一次转换的一种方法是将延迟设置得更高一点：

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

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

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

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

于 2013-08-19T16:30:14.617 回答