How can I autoplay this pure CSS3 slideshow?

Question

UPDATE: Issue here is (see current CSS), once the last (second) image comes up, the animation back to first image happens straight away with no delay. I'd expect the same delay for animation to second image to apply back to the first one, instead of it going straight back to the first image (at translationX(0)).

I have a slideshow as shown in the code below:

 .slideshowcontainer { width:800px; height:400px; margin-left:auto; margin-right:auto; margin-top:0px; text-align:center; overflow:hidden; position:relative; top:30px; border-style:solid; border-width:10px; border-color:white; border-radius:15px; } .imagecontainer { width:1600px; height:400px; clear:both; position:relative; -webkit-transition:left 3s; -moz-transition:left 3s; -o-transition:left 3s; -ms-transition:left 3s; transition:left 3s; animation:scroller 16s infinite; } @keyframes scroller { 0% {transform:translateX(0);} 31.25% {transform:translateX(0);} 50% {transform:translateX(-800px);} 81.25% {transform:translateX(-800px);} 100% {transform:translateX(0);} } .slideshowimage { float:left; margin:0px; padding:0px; position:relative; } #slideshowimage-1:target ~ .imagecontainer { left:0px; } #slideshowimage-2:target ~ .imagecontainer { left:-800px; } .buttoncontainer { position:relative; top:-20px; } .button { display:inline-block; height:10px; width:10px; border-radius:10px; background-color:darkgray; -webkit-transition:background-color 0.25s; -moz-transition:background-color 0.25s; -o-transition:background-color 0.25s; -ms-transition:background-color 0.25s; transition:background-color 0.25s; } .button:hover { background-color:gray; } 

Further more, I'd like to ask if anyone knows why when I click the button for next image upon loading page, the image is displayed with no transition. The lack of transition happens only on the first click.

Answer 1

You need to make some calculations at the animation keyframes

For example, since you have 2 images and want to see each image for 5 seconds and the slide from one to the other should last for 1 second you need a total of 12 seconds. So use animation:scroller 12s; .

For the actual keyframes each second is 100% / 12 = 8.33% of the animation.

@keyframes scroller {
    0% {transform:translateX(0);}
    41.6% {transform:translateX(0);} /*wait from 0% to 41%, which is 5 seconds*/
    50% {transform:translateX(-800px);} /*slide for 1 second*/
    91.6% {transform:translateX(-800px);} /*wait 5 seconds*/
    100% {transform:translateX(0);} /* slide back for 1 second*/
}

---

 .slideshowcontainer { width:800px; height:400px; margin-left:auto; margin-right:auto; margin-top:0px; text-align:center; overflow:hidden; position:relative; top:30px; border-style:solid; border-width:10px; border-color:white; border-radius:15px; } .imagecontainer { width:1600px; height:400px; clear:both; position:relative; -webkit-transition:left 3s; -moz-transition:left 3s; -o-transition:left 3s; -ms-transition:left 3s; transition:left 3s; animation:scroller 12s; } @keyframes scroller { 0% {transform:translateX(0);} 41.6% {transform:translateX(0);} /*41% of 12seconds is 5second*/ 50% {transform:translateX(-800px);} /*slide for 1 second*/ 91.6% {transform:translateX(-800px);} /*wait 5 seconds*/ 100% {transform:translateX(0);} /* slide back for 1 second*/ } .slideshowimage { float:left; margin:0px; padding:0px; position:relative; } #slideshowimage-1:target ~ .imagecontainer { left:0px; } #slideshowimage-2:target ~ .imagecontainer { left:-800px; } .buttoncontainer { position:relative; top:-20px; } .button { display:inline-block; height:10px; width:10px; border-radius:10px; background-color:darkgray; -webkit-transition:background-color 0.25s; -moz-transition:background-color 0.25s; -o-transition:background-color 0.25s; -ms-transition:background-color 0.25s; transition:background-color 0.25s; } .button:hover { background-color:gray; } 

 <div class="slideshowcontainer"> <span id="slideshowimage-1"></span> <span id="slideshowimage-2"></span> <span id="slideshowimage-3"></span> <div class="imagecontainer"> <img src="https://placehold.it/800x400" class="slideshowimage" style="width:800px;height:400px;"> <img src="https://placehold.it/800x400" class="slideshowimage" style="width:800px;height:400px;"> </div> <div class="buttoncontainer"> <a href="#slideshowimage-1" class="button"></a> <a href="#slideshowimage-2" class="button"></a> </div> </div> 

---

if you want the autslide to go on for ever then use animation:scroller 12s infinite;