CSSのみで超シンプルなフェードスライダーを実装する。more Simple版

前回、CSSのみで超シンプルなフェードスライダーを実装する。を書きましたが、
もっと単純明快な方法がありましたので、追記という形で投稿します。

前回のイマイチだった点

@keyframes でopacityを切り替えていた点。

今回の修正点

@keyframesで backgroun-imageで画像を切り替えれば良い。
コードは以下のようになります。

HTML

<div class="fadeSlider">
</div>

SCSS

.fadeSlider {
  width: 100vw;
  height: 100vh;
  background-position: center center;
  background-repeat: no-repeat;
  background-size: cover;
  background-image: url(/img/example_03.jpg), url(/img/example_02.jpg), url(/img/example_01.jpg);
  animation: fadeSlideImg 15s ease-out infinite;
  animation-delay: 5s;
}

@keyframes fadeSlideImg {
  0% { background-image: url(/img/example_01.jpg); }
  33% { background-image: url(/img/example_02.jpg); }
  66% { background-image: url(/img/example_03.jpg); }
  100% { background-image: url(/img/example_01.jpg); }
}

実装のポイント

あらかじめcssで表示させる画像を指定し、読み込んでおきましょう。
（読み込んでおかないと@keyframesで画像が切り替わるときに画像読み込みによる遅延が生じてしまうため）

デモはこちらからご確認ください

See the Pen CSS FadeSlide by sugimoto tetsuharu (@osugidesu) on CodePen.

前回のものよりスッキリとしましたね！