Concept:
Staggered animation to create a slideshow from pure CSS and HTML5
Demo
The CSS:
div {
width: 100px;
height: 100px;
background: red;
position: relative;
-webkit-animation: mymove 5s infinite; /* Safari 4.0 - 8.0 */
-webkit-animation-delay: 2s; /* Safari 4.0 - 8.0 */
animation: mymove 5s infinite;
animation-delay: 2s;
}
div#two {
animation: mymove 5s infinite;
animation-delay: 5s;
}
/* Safari 4.0 - 8.0 */
@-webkit-keyframes mymove {
from {left: 0px;}
to {left: 200px;}
}
@keyframes mymove {
from {left: 0px;}
to {left: 200px;}
}
And the HTML:
<div id="one"></div>
<div id="two"></div>