画像スライド（CSSでフェードイン）

ポイント

画像の枚数とアニメーションにかける時間によって実装をしよう！
実装の仕方が少し変わるから気をつけよう！

index.html

    <div class="main-slide">
      <img src="images/pic00.png" alt="">
      <img src="images/pic01.png" alt="">
      <img src="images/pic02.png" alt="">
    </div>

style.css

* {
  padding: 0;
  margin: 0;
}

.main-slide {
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
}

.main-slide img {
  width: 100%;
  height: auto;
  position: absolute;
  top: 0;
  left: 0;
  opacity: 0;
  animation: slide-animation 24s linear infinite 0s;
}

.main-slide img {
  height: auto;
}

.main-slide img:nth-of-type(2){
  animation-delay: 8s;/*2枚目の開始時間*/
}

.main-slide img:nth-of-type(3){
  animation-delay: 16s;/*3枚目の開始時間*/
}

@keyframes slide-animation {
  0% {
    animation-timing-function: ease-in;/*ゆっくり表示される*/
    opacity: 0;
  }
  12% {
    animation-timing-function: ease-out;/*表示された*/
    opacity: 1;
  }
  30% {
    opacity: 1;/*＊表示期間*/
  }
  43% {
    opacity: 0;/*次の画像で消えている*/
  }
  100% {
    opacity: 0;/*表示されていない時間*/
  }
}

実際の動き