Zenn
🔖

画像が自動切り替わるCSSアニメーション

2023/05/28に公開
CSS
HTML
tech

これはなに

複数枚の画像が自動的に切り替わるCSSアニメーションを実装します。
↓これをCSSアニメーションで実装します

実装方法

表示したい枚数分だけ<div class="image src"></div>を追加してください。
今回は５枚表示するので５個追加しています。

index.html
<html>
  <body>
    <div class="container">
      <div class="image src1"></div>
      <div class="image src2"></div>
      <div class="image src3"></div>
      <div class="image src4"></div>
      <div class="image src5"></div>
    </div>
  </body>
</html>

.containerにposition:relative、.imageにposition: absoluteを指定して、サイズを合わせます。
アニメーションについては、5枚の画像が5秒ごとで切り替わり、それを繰り返す設定にしています。１周25秒です。ここは画像の枚数や表示させたい秒数に合わせて変えてください。

.container{
  height: 300px;
  width: 300px;
  position: relative;
}

.image {
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  opacity: 0;
  background-size: cover;
  background-position: center center;
  
  animation: image-switch-animation 25s infinite;
}

画像を指定します。

.src1 {
  background-image: url(https://github.com/ohtasoji/sample-app/assets/16428443/bce8cff5-4a9a-429a-b8e3-33ff82b2fc17);
}
.src2 {
  background-image: url(https://github.com/ohtasoji/sample-app/assets/16428443/0001f1ef-5c1c-40b3-a310-68182c5485c3);
}
.src3 {
  background-image: url(https://github.com/ohtasoji/sample-app/assets/16428443/2c6d06e3-1076-450b-8009-534953605bb7);
}
.src4 {
  background-image: url(https://github.com/ohtasoji/sample-app/assets/16428443/389faaf0-cfdb-47c9-93a7-df0876e15682);
}
.src5 {
  background-image: url(https://github.com/ohtasoji/sample-app/assets/16428443/653d2463-7c13-46d6-be2a-f39432da262c);
}

1.25秒でフェードイン、フェードアウトして5秒間表示します。%を調整して秒数を調節できます。

@keyframes image-switch-animation {
  0%{ opacity: 0;}
  5%{ opacity: 1;}
  25%{ opacity: 1;}
  30%{ opacity: 0;}
  100%{ opacity: 0;}
}

アニメーションを順番に開始します。今回は合計25秒で５枚なので5秒ごとアニメーションを遅らせて開始します。

.image:nth-of-type(1) {
  animation-delay: 0s;
}
.image:nth-of-type(2) {
  animation-delay: 5s;
}
.image:nth-of-type(3) {
  animation-delay: 10s;
}
.image:nth-of-type(4) {
  animation-delay: 15s;
}
.image:nth-of-type(5) {
  animation-delay: 20s;
}

すべてのコード

https://gist.github.com/ohtasoji/febdafd244bd44416870233808a78238

Discussion