加载CSS3动画的时间

Question

I currently have a css3 animation that rotates background images. The issue is, i need the timing of the animations to be quite long, so they are not distracting and this is reflected with a black background on pageload until the 1st slide eases in. Here is what I have:

.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;
}

What is the best way to adjust this so there is no black background in the beginning? Should I have a background default? Can I change the animation so that it eases the first slide in very quickly, but returns to normal for the following iterations?

Answer 1

As I understand it, you have an animation than lasts 144 seconds.

Then, you have several elements that share this animation, and where the second one is delayed 24 seconds.

So, I guess that you have 6 elements, and that the remaining ones are delayed at 48, 72, and so on.

One way to make the first transition earlier is just to set the delays a little bit higher:

You have 0, 24, 48, 72, 96, 120.

Set it to 1, 25, 49, 73, 97, 121.

The first transition will happen at 1 second.

And, once started, everything keeps the same. (the delays between elements keep unchanged)