CSS-Only Slideshow.

Quick and dirty slideshow using only CSS. Hardcoded at 4 images.

HTML

<!-- Some example images. -->
<div class="slideshow">
    <div class="slide" id="slide-0">
        <a href="http://www.flickr.com/photos/hamed/2476599906/" title="Khezr Beach, Hormoz Island, Persian Gulf, Iran by Hamed Saber, on Flickr"><img src="http://farm4.staticflickr.com/3219/2476599906_48092d63d3_b.jpg" width="900" height="800" alt="Khezr Beach, Hormoz Island, Persian Gulf, Iran"></a>
    </div>
    <div class="slide" id="slide-1">
        <a href="http://www.flickr.com/photos/31246066@N04/5112581485/" title="Dream Pool by Ian Sane, on Flickr"><img src="http://farm5.staticflickr.com/4151/5112581485_9ed8fe9811_b.jpg" width="900" height="800" alt="Dream Pool"></a>
    </div>
    <div class="slide" id="slide-2">
        <a href="http://www.flickr.com/photos/dexxus/5652914929/" title="waipio by paul bica, on Flickr"><img src="http://farm6.staticflickr.com/5189/5652914929_80691fe627_b.jpg" width="900" height="800" alt="waipio"></a>
    </div>
    <div class="slide" id="slide-3">
        <a href="http://www.flickr.com/photos/80901381@N04/7758856510/" title="Over Looking The Sea by A Guy Taking Pictures, on Flickr"><img src="http://farm9.staticflickr.com/8427/7758856510_96fc929b7f_b.jpg" width="1024" height="763" alt="Over Looking The Sea"></a>
        </div>
</div>

CSS

.slideshow .slide {
    position: absolute;
    opacity: 0;
}

@keyframes cycle {
    0% { opacity: 0; }
    5% { opacity: 1; }
    20% { opacity: 1; }
    25% { opacity: 0; }
}

@-moz-keyframes cycle {
    0% { opacity: 0; }
    5% { opacity: 1; }
    20% { opacity: 1; }
    25% { opacity: 0; }
}

@-webkit-keyframes cycle {
    0% { opacity: 0; }
    5% { opacity: 1; }
    20% { opacity: 1; }
    25% { opacity: 0; }
}

#slide-0 {
    -webkit-animation: cycle 24s linear infinite;
       -moz-animation: cycle 24s linear infinite;
            animation: cycle 24s linear infinite;
}

#slide-1 {
    -webkit-animation: cycle 24s linear 6s infinite;
       -moz-animation: cycle 24s linear 6s infinite;
            animation: cycle 24s linear 6s infinite;
}

#slide-2 {
    -webkit-animation: cycle 24s linear 12s infinite;
       -moz-animation: cycle 24s linear 12s infinite;
            animation: cycle 24s linear 12s infinite;
}

#slide-3 {
    -webkit-animation: cycle 24s linear 18s infinite;
       -moz-animation: cycle 24s linear 18s infinite;
            animation: cycle 24s linear 18s infinite;
}