CSS3 - Image Slideshow

Question

I've managed to create a slideshow only with CSS3 alone. Slideshow is working smooth and fine. But the problem is i've defined some headers for each image and it's getting displayed as per the image for the first time and when it starts again for the 2nd time all the headers are getting displayed at once.

 <pre> .cb-slideshow, .cb-slideshow:after { width: 100%; height: 100%; top: 0; left: 0; list-style: none; } .cb-slideshow li span { width: 100%; height: 100%; position: absolute; top: 0; left: 0; opacity: 0; background-size: cover; background-position: 100%; background-repeat: none; -webkit-animation: slideshow 32s cubic-bezier(.01,.56,.07,.9) infinite 0s; } .cb-slideshow li div { width: 100%; top: 0; left: 0; font-family: Century Gothic; position: absolute; } .cb-slideshow li div h3 { font-size: 100px; text-align: center; text-transform: uppercase; opacity: 0; color: #000; /*margin: 500px 0 0 35px;*/ -webkit-animation: slideIn 8s; } .cb-slideshow li:nth-child(1) span { background-image: url(1.jpg); } .cb-slideshow li:nth-child(2) span { background-image: url(2.jpg); -webkit-animation-delay: 8s; } .cb-slideshow li:nth-child(3) span { background-image: url(1.jpg); -webkit-animation-delay: 16s; } .cb-slideshow li:nth-child(4) span { background-image: url(2.jpg); -webkit-animation-delay: 24s; } .cb-slideshow li:nth-child(2) div h3 { -webkit-animation-delay: 8s; } .cb-slideshow li:nth-child(3) div h3 { -webkit-animation-delay: 16s; } .cb-slideshow li:nth-child(4) div h3 { -webkit-animation-delay: 24s; } @-webkit-keyframes slideshow { 0% { opacity: 1; -webkit-transform: translateX(2000px); } 5% { opacity: 1; -webkit-transform: translateX(0); } 25% { opacity: 1; -webkit-transform: translateX(0); } 30% { opacity: 0; -webkit-transform: translateX(-2000px); } 35% { opacity: 0; -webkit-transform: translateX(0); } 50% { opacity: 0; -webkit-transform: translateX(0); } 75% { opacity: 0; -webkit-transform: translateX(0); } 100% { opacity: 0; -webkit-transform: translateX(0); } } @-webkit-keyframes slideIn { 0% { opacity: 1; -webkit-transform: translateY(-2000px); } 25% { opacity: 1; -webkit-transform: translateY(0); } 35% { opacity: 1; -webkit-transform: translateY(0); } 45% { opacity: 1; -webkit-transform: translateY(0); } 50% { opacity: 1; -webkit-transform: translateY(0); } 65% { opacity: 1; -webkit-transform: translateY(0); } 75% { opacity: 1; -webkit-transform: translateY(0); } 76% { opacity: 1; -webkit-transform: translateY(0); } 97% { opacity: 1; -webkit-transform: translateY(0); } 100% { -webkit-transform: scale(1.1) rotate(3deg); opacity: 0; } } </pre>

 <ul class="cb-slideshow"> <li> <span>Image 01</span> <div> <h3>Header 1</h3> </div> </li> <li> <span>Image 02</span> <div> <h3>Header 2</h3> </div> </li> <li> <span>Image 03</span> <div> <h3>Header 3</h3> </div> </li> <li> <span>Image 04</span> <div> <h3>Header 4</h3> </div> </li> </ul>

Some one please help me in fixing the appearance of the header as per the images.

Thanks in advance.

Answer 1

Here you go: http://jsfiddle.net/Yd9T6/5/

What have I changed?
I have just scheduled the key-frames of your slideIn animation in sync with the key-frames your slideshow animation. Here is the updated style:

@-webkit-keyframes slideshow {
    0% {
        opacity: 1;
        -webkit-transform: translateX(2000px);
    }
    5% {
        opacity: 1;
        -webkit-transform: translateX(0);
    }
    20% {
        opacity: 1;
        -webkit-transform: translateX(0);
    }
    25% {
        opacity: 0;
        -webkit-transform: translateX(-2000px);
    }
    100% {
        opacity: 0;
        -webkit-transform: translateX(0);
    }
}
@-webkit-keyframes slideIn {
    0% {
        opacity: 1;
        -webkit-transform: translateY(-2000px);
    }
    5% {
        opacity: 1;
        -webkit-transform: translateY(0);
    }
    20% {
        opacity: 1;
        -webkit-transform: translateY(0);
    }
    25% {
        opacity: 0;
        -webkit-transform: scale(1.1) rotate(3deg);
    }
    100% {
        opacity: 0;
        -webkit-transform: translateY(0);
    }
}

Some observations:

1. 30% of 32s is 9.6s and not 8s. I changed the cross-over value to be 25% which makes it exactly 8s. Some key-frame rules had to be changed to account for this.
2. This will not scale to a larger number of images since you need to set the animation duration, delay and keyframes according to the number of images that you have. You'll ultimately need to script this through JS.
3. There is a possible bug with webkit's implementation of animation rules. If I keep the tab of the fiddle open, for however long, I don't see any problems. If, however, I switch tabs and go back, sometime I see everything lying on top of one another. This auto-corrects itself once an animation cycle has been completed.

UPDATE

The aforesaid bug was actually caused due to the timing issues. After fixing the cross-over key-frame at exactly 8s, this problem went away too. Why it used to show up only on changing tabs - is still a mystery for me.