<div class="scrollable"> <div class="items"> <img src="http://placehold.it/333x500/E8117F/FFFFFF&text=Horizontal"/> <img src="http://placehold.it/333x500/FFFFFF/E8117F&text=css3"/> <img src="http://placehold.it/333x500/3D668F/FFFFFF&text=slide show"/> </div> </div>
body { padding: 1em; background: #999 } .scrollable { width: 333px; margin: 0 auto; padding: 0; border:10px solid #fff; background: #000; position: relative; overflow: hidden; text-align: center; } img { max-width: 333px; margin: 0; float:left; } .items { width:999px; -webkit-animation: hscroll 12s infinite; -moz-animation: hscroll 12s infinite; -ms-animation: hscroll 12s infinite; } @-webkit-keyframes hscroll { 0% { margin-left: 0; } 27.33% { margin-left: 0 } 33.33% { margin-left: -333px; } 60.66% { margin-left: -333px; } 66.66% { margin-left: -666px; } 94.99% { margin-left: -666px; } 100% { margin-left: 0 } } @-moz-keyframes hscroll { 0% { margin-left: 0; } 27.33% { margin-left: 0 } 33.33% { margin-left: -333px; } 60.66% { margin-left: -333px; } 66.66% { margin-left: -666px; } 94.99% { margin-left: -666px; } 100% { margin-left: 0 } } @-ms-keyframes hscroll { 0% { margin-left: 0; } 27.33% { margin-left: 0 } 33.33% { margin-left: -333px; } 60.66% { margin-left: -333px; } 66.66% { margin-left: -666px; } 94.99% { margin-left: -666px; } 100% { margin-left: 0 } }