CSSだけでOK！レスポンシブ対応のズームイン・ズームアウトを繰り返すCSSフェードスライダー

• 作成：2017/08/28
• 更新：2019/01/29
• Web制作 >

CSSだけで動く「ズームインとズームアウトをフェードしながら交互に繰り返すCSSスライダー」です。

エンジニア速報は Twitter の@commteで配信しています。

作成したデモはこちら。交互にズームインとズームアウトを繰り返し表示しています。CSSでみたい人は「VIEW COMPILED」を押してください。

2019/01/29 追記：IEでカクつく場合は、以下をliに追加するか、@keyframesにwidth幅をpxで指定してください。

transform: rotate(0.0001deg);

参考にさせていただいたのは、cssだけで作るスライダー – PeonyQueenで作成されているスライダー。

上記のスライダーがとてもよく出来ていてCSSのアニメーションで時間差をつけてスライドを切り替え、フェードインを繰り返すようになっています。CSSなので読み込みや動作も早く扱いやすいです。

こちらを参考に、htmlのimg記述をなくし、フェードインとフェードアウトを繰り返すようにカスタマイズさせていただきました。

5枚の画像を切替えるバージョンです。htmlの記述はこれだけ。

html

<div class="slider_css">
  <ul>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
  </ul>
</div>

SCSS

@mixin bp {
  @media only screen and (max-width: 768px) {
    @content;
  }
}
.slider_css {
  height: 550px;
  margin: 0 auto;
  position: relative;
  overflow: hidden;
  ul {
    margin: 0;
    padding: 0;
    list-style: none;
    li {
      background-size: cover;
      width: 100%;
      height: 550px;
      position: absolute;
      top: 0;
      left: 0;
      animation-iteration-count: infinite;
      animation-duration: 40s;
      @for $value from 1 through 5 {
        &:nth-child(#{$value}) {
          background-image: url("https://s3-us-west-2.amazonaws.com/s.cdpn.io/381167/animal#{$value}.jpg");
          @if $value % 2 == 0 {
            //偶数
            animation-name: slider-zoomout;
          }
          @else {
            //奇数
            animation-name: slider-zoomin;
          }
          @if $value != 1 {
            //最初以外は透過
            opacity: 0;
          }
          animation-delay: #{($value*8-11)}s; //-3からスタートして、8づつ加算する
        }
      }
      img {
        width: 130%;
      }
    }
  }

  @include bp {
    height: 400px;
    ul {
      li {
        background-size: contain;
        background-repeat: no-repeat;
      }
    }
  }
}
// 5~8秒の間だけ透過解除
@keyframes slider-zoomin {
  0% {
    opacity: 0;
    transform: scale(1.0);
  }
  12.5% {
    opacity: 1;
  }
  20% {
    opacity: 1;
  }
  27.5% {
    opacity: 0;
  }
  100% {
    opacity: 0;
    transform: scale(1.3);
  }
}
@keyframes slider-zoomout {
  0% {
    opacity: 0;
    transform: scale(1.3);
  }
  12.5% {
    opacity: 1;
  }
  20% {
    opacity: 1;
  }
  27.5% {
    opacity: 0;
  }
  100% {
    opacity: 0;
    transform: scale(1.0);
  }
}

画像はCSS背景に設定し、偶数と奇数の画像によって、ズームインとズームアウトのアニメーションを割り当てます。

ズームインだけ適用したい場合は、animation-nameの箇所を、どちらもslider-zoominにしてください。ズームアウトの場合はslider-zoomoutですね。

1枚8秒(5枚の画像×8秒)で計算するので、アニメーション周期（animation-duration）は40秒で設定します。

1枚目以外は透過させ、表示から開始させるので-3秒からスタートし8秒づつ加算してアニメーション開始時間をずらします（animation-delay）。

※1枚目は-3秒から開始し、2枚目は8秒後の5秒から開始するという意味。

アニメーションは40秒間のうち5~8秒の間だけ透過解除したいので12.5%（5×100/40=12.5）と20%（8×100/40=20）にopacity:1を設定。秒数をdurationで割ります。

分かりにくいので表を作りました。以下の表だと、5枚の時は12.5~20%、4枚の時は15.63~25%にopacity:1を指定すればよいということになります。

1枚8秒で設定した時の計算表

※アニメーション周期や画像枚数を変更する場合は、このあたりを再計算する必要が出てきますが、仕組みが分かれば比較的使いやすいのではないでしょうか。以上、軽量・高速・簡単記述のCSSスライダーでした。