Auto Slideshow with CSS3

by Roberto Apasajja

HTML

<div id="slideshow">
    <div class="container">
        <section></section>
        <section></section>
        <section></section>
        <section></section>
        <section></section>
    </div>
</div>

CSS

body {
    background-color:#eee;
    padding:50px;
    text-align:center;
}

#slideshow {
    width:300px;
    margin:0 auto;
    overflow:hidden;
}

.container {
    width:1200px; /* 300 x 4 */
    height:90px;
    position:relative;
    -webkit-animation:slide 4s ease-in-out infinite;
    -moz-animation:slide 4s ease-in-out infinite;
    -ms-animation:slide 4s ease-in-out infinite;
    -o-animation:slide 4s ease-in-out infinite;
    animation:slide 4s ease-in-out infinite;
}

.container section {
    width:300px;
    height:90px;
    float:left;
}

.container section:nth-child(1) {background-color:red}
.container section:nth-child(2) {background-color:green}
.container section:nth-child(3) {background-color:blue}
.container section:nth-child(4) {background-color:yellow}
.container section:nth-child(4) {background-color:violet}

@-webkit-keyframes slide {
    0% {left:0}
    25% {left:-300px}
    50% {left:-600px}
    75% {left:-900px}
    100% {left:0}
}
@-moz-keyframes slide {
    0% {left:0}
    25% {left:-300px}
    50% {left:-600px}
    75% {left:-900px}
    100% {left:0}
}
@-ms-keyframes slide {
    0% {left:0}
    25% {left:-300px}
    50% {left:-600px}
    75% {left:-900px}
    100% {left:0}
}
@-o-keyframes slide {
    0% {left:0}
    25% {left:-300px}
    50% {left:-600px}
    75% {left:-900px}
    100% {left:0}
}
@keyframes slide {
    0% {left:0}
    25% {left:-300px}
    50% {left:-600px}
    75% {left:-900px}
    100% {left:0}
}