CSSアニメーションを使用した複数の画像のクロスフェード

複数の画像のクロスフェードを実現するために、CSSアニメーションを使用する方法をいくつか紹介します。

方法1: keyframesとopacityを使用する方法

@keyframes crossfade {
  0% { opacity: 0; }
  25% { opacity: 1; }
  75% { opacity: 1; }
  100% { opacity: 0; }
}
.crossfade-container {
  position: relative;
}
.crossfade-image {
  position: absolute;
  width: 100%;
  height: 100%;
  animation: crossfade 4s infinite;
}
.crossfade-image:nth-child(1) {
  animation-delay: 0s;
}
.crossfade-image:nth-child(2) {
  animation-delay: 2s;
}
.crossfade-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

HTMLの例:

<div class="crossfade-container">
  <div class="crossfade-image">
    <img src="image1.jpg" alt="Image 1">
  </div>
  <div class="crossfade-image">
    <img src="image2.jpg" alt="Image 2">
  </div>
</div>

この例では、crossfade-containerクラスが画像の親要素となります。各画像はcrossfade-imageクラスが付けられ、nth-childセレクタを使用してアニメーションの遅延時間を設定します。画像ファイルはimg要素のsrc属性に指定し、alt属性には代替テキストを設定します。

方法2: CSSのtransitionを使用する方法

.crossfade-container {
  position: relative;
  width: 100%;
  height: 100%;
  overflow: hidden;
}
.crossfade-image {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  transition: opacity 2s;
}
.crossfade-container:hover .crossfade-image {
  opacity: 1;
}
.crossfade-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

HTMLの例:

<div class="crossfade-container">
  <div class="crossfade-image">
    <img src="image1.jpg" alt="Image 1">
  </div>
  <div class="crossfade-image">
    <img src="image2.jpg" alt="Image 2">
  </div>
</div>

この例では、crossfade-containerクラスが画像の親要素となります。各画像はcrossfade-imageクラスが付けられ、opacityプロパティとtransitionプロパティを使用してフェードのアニメーションを実現します。マウスホバー時に画像のopacityを変更するため、クラスセレクタと:hover疑似クラスを使用します。

これらは複数の方法のうちのいくつかであり、他にもさまざまなアプローチがあります。必要に応じてこれらの例をカスタマイズして使用してください。