CSS3で作成した画像スクロール効果

<base href="https://s3-us-west-2.amazonaws.com/s.cdpn.io/4273/">
<div id="スライダー">
<図>
<img src="austin-fireworks.jpg" alt>
<img src="taj-mahal_copy.jpg" alt>
<img src="ibiza.jpg" alt>
<img src="ankor-wat.jpg" alt>
<img src="austin-fireworks.jpg" alt>
</図>
</div>

@keyframes スライド {
0% { 左: 0%; }
20% { 残り: 0%; }
25% { 左: -100%; }
45% { 左: -100%; }
50% { 左: -200%; }
70% { 左: -200%; }
75% { 左: -300%; }
95% { 左: -300%; }
100% { 左: -400%; }
}

本文 { マージン: 0; } 
div#スライダー { オーバーフロー: 非表示; }
div#スライダー図画像 { 幅: 20%; フロート: left; }
div#スライダー図{ 
  位置: 相対的;
  幅: 500%;
  マージン: 0;
  左: 0;
  テキスト配置: 左;
  フォントサイズ: 0;
  アニメーション: 5 秒スライド無限; 
}