CSSのみでスライドショーを実装

Question

CSSのみでふわっとスライドショーを作成しましたが、
上手くリープされません。
7枚目の最後の画像から1枚目が表示されず、
3枚目の画像に飛んでしまいます。
間違っているところを教示していただきたいです。
お願いします。

CSS↓

.album {
	margin: auto;
	background-color: white;
	position: relative;
}

.album img {
	width: 100%;
	animation-name: album;
	animation-duration: 60s;
	animation-iteration-count: infinite;
	opacity: 0;
}

.album .img1 {
	display: block;
	margin: 0 auto;
}

.album .img2 {
	animation-delay:10s;
	position: absolute;
	top: 0;
	left: 0;
}

.album .img3 {
	animation-delay:20s;
	position: absolute;
	top: 0;
	left: 0;
}

.album .img4 {
	animation-delay:30s;
	position: absolute;
	top: 0;
	left: 0;
}

.album .img5 {
	animation-delay:40s;
	position: absolute;
	top: 0;
	left: 0;
}

.album .img6 {
  animation-delay:50s;
  position: absolute;
  top: 0;
  left: 0;
}

.album .img7 {
  animation-delay:60s;
  position: absolute;
  top: 0;
  left: 0;
}


@keyframes album {
0% {opacity: 0}
17% {opacity: 1}
33% {opacity: 1}
50% {opacity: 0}
}

Comments

[Lhankor_Mhy]

HTMLをご提示ください。

[aomutsu0615]

<div class="album">
<img class="img1" src="img/1.jpg" width="100%" style="vertical-align:middle;" alt="">
<img class="img2" src="img/2.jpg" width="100%" style="vertical-align:middle;" alt="">
<img class="img3" src="img/3.jpg" width="100%" style="vertical-align:middle;" alt="">
<img class="img4" src="img/4.jpg" width="100%" style="vertical-align:middle;" alt="">
<img class="img5" src="img/5.jpg" width="100%" style="vertical-align:middle;" alt="">
<img class="img6" src="img/10.jpg" width="100%" style="vertical-align:middle;" alt="">
<img class="img7" src="img/11.jpg" width="100%" style="vertical-align:middle;" alt="">
</div>

遅くなりました。こちらですm(__)m

Answer 1

CSSではなく、slickで実装できました。

Answer 2

ありがとうございます。
リープは上手くいきました！
フェードで、画像が重なり合うようにするには
どのように調整すればいいでしょうか。
ご教示いただけましたら嬉しいです。
よろしくお願い致します。

Answer 3

こんな感じですか？　クロスフェードの重ねる部分は工夫してみてください。

    .album img {
      width: 100%;
      animation-name: album;
      /* animation-duration: 60s; */
      animation-duration: 70s;
      animation-iteration-count: infinite;
      opacity: 0;
    }

/* ... */

    @keyframes album {

/*
0% {opacity: 0}
17% {opacity: 1}
33% {opacity: 1}
50% {opacity: 0}
*/

      0% {
        opacity: 0
      }

      4.76% {
        opacity: 1
      }

      9.52% {
        opacity: 1
      }

      14.29% {
        opacity: 0
      }
    }