スライドショー（右から左に重なるタイプ）

説明

右から左に重なるスライドショーを実現するには、あからじめスライドショーで使う画像を用意しておきます。ここでは5枚の画像を用意しました。この画像をbackground-imageとbackground-positionを使って横に並べて配置します。ポイントとしては最初と最後の画像は同じものにしておくということです。このようにすることで切れ目なくスライドさせる事ができます。
次にアニメーション部分はanimationプロパティに画像が移動する（切り替わる）時間を設定します。
アニメーションフレームのキーは0%の時は初期位置として最初の画像は0pxをその他の画像の位置を画像の横幅にします。後は一定間隔ごとにn番目の画像を0pxに設定していきます。注意点としてはbackground-imageで最後に指定した画像が一番奥に表示されるという事です。このため、最後に重なる画像を最初に定義しておく必要があります。