javascript - CSS3 animation timing on load -

i have css3 animation rotates background images. issue is, need timing of animations quite long, not distracting , reflected black background on pageload until 1st slide eases in. here 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 best way adjust there no black background in beginning? should have background default? can change animation eases first slide in quickly, returns normal following iterations?

as understand it, have animation lasts 144 seconds.

then, have several elements share animation, , second 1 delayed 24 seconds.

so, guess have 6 elements, , remaining ones delayed @ 48, 72, , on.

one way make first transition earlier set delays little bit higher:

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

set 1, 25, 49, 73, 97, 121.

the first transition happen @ 1 second.

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