css(scss)のみで簡単なフェードスライダー

フェードスライダーを使いたいけどjsを使うまでもないなって時に

See the Pen only css fade slider by kazuto (@kzt) on CodePen.

解説

cssアニメーションではディレイを含めたループができないので
表示されていない時間も含めたアニメーションの時間を計算しています。

$slide: 6; //スライド数
$slider-active-time: 8; //スライダーの表示時間(秒)
$slider-duration: 1; //スライダーの表示切り替え時間(秒)
$slider-time: (($slider-active-time + $slider-duration) * $slide); //アニメーションの時間

forを使い、それぞれにディレイを持たせ表示をずらします。
ついでにそのindexを使って画像を指定しています。

@for $i from 1 through $slide {
  &:nth-child(#{$i}) {
    animation-delay: #{(($slider-active-time + $slider-duration) * ($i - 1)) - $slider-duration}s;
    background-image: url('https://picsum.photos/1600/1000?image=#{$i}');
  }
}

はじめに設定したスライドの時間等を%に変換してkeyframeに設定しています。

$fade: $slider-duration / $slider-time * 100;
$active: $slider-active-time / $slider-time * 100;
@keyframes fade-slider {
  0% {
    opacity: 0;
    transform: scale(1.2);
  }

  #{$fade}% {
    opacity: 1;
  }

  #{$fade + $active}% {
    opacity: 1;
  }

  #{$fade + $active + $fade}% {
    opacity: 0;
    transform: scale(1);
  }

  100% {
    opacity: 0;
  }
}