How can I autoplay this pure CSS3 slideshow?
<p>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)).</p>

<p>I have a slideshow as shown in the code below:</p>

<p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
<div class="snippet-code">
<pre class="snippet-code-css lang-css prettyprint-override"><code>.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;
}</code></pre>
</div>
</div>
</p>

<p>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. </p>