加载CSS3动画计时

CSS3 animation timing on load

本文关键字：动画 CSS3 加载      更新时间：2023-09-26

我目前有一个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;
}

为了一开始就没有黑色背景，最好的调整方法是什么？我应该有一个背景默认值吗？我可以更改动画，使其非常快速地简化第一个幻灯片，但在接下来的迭代中恢复正常吗？

据我所知，你有一个持续144秒的动画。

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

所以，我猜你有6个元素，剩下的元素被延迟到48，72，依此类推

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

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

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

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

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

相关文章：