CSSを使用したスライダーの実現で躓いています

Question

###前提・実現したいこと
現在、CSSでスライダーを実現させようとしていますが、うまくいっておりません。
画像13枚を使用したスライダーを表示させようと考えており、下記のCSSの設定しました。
1周目はうまくいくのですが、
・1週目の最後に数秒止まる
・2週目の最初の2枚が飛ばされ、3枚目からスタートする
このような現象が起こっております。
アドバイス、よろしくお願いいたします。

###コード（CSS）

.slider{
position:relative;
overflow:hidden;
background-color:#000;
}
.slider span img {
z-index:1;
width:100%;
}
.slider span img:nth-of-type(n+2){
z-index:10;
opacity:0;
position:absolute;
top:0;
left:0;
-webkit-animation:overwrap 26s ease infinite;
-moz-animation:overwrap 26s ease infinite;
animation:overwrap 26s ease infinite;
}
.slider span img:nth-of-type(1) {
}
.slider span img:nth-of-type(2) {
-webkit-animation-delay:2s;
-moz-animation-delay:2s;
animation-delay:2s;
}
.slider span img:nth-of-type(3) {
-webkit-animation-delay:4s;
-moz-animation-delay:4s;
animation-delay:4s;
}
.slider span img:nth-of-type(4) {
-webkit-animation-delay:6s;
-moz-animation-delay:6s;
animation-delay:6s;
}
.slider span img:nth-of-type(5) {
-webkit-animation-delay:8s;
-moz-animation-delay:8s;
animation-delay:8s;
}
.slider span img:nth-of-type(6) {
-webkit-animation-delay:10s;
-moz-animation-delay:10s;
animation-delay:10s;
}
.slider span img:nth-of-type(7) {
-webkit-animation-delay:12s;
-moz-animation-delay12s;
animation-delay:12s;
}
.slider span img:nth-of-type(8) {
-webkit-animation-delay:14s;
-moz-animation-delay:14s;
animation-delay:14s;
}
.slider span img:nth-of-type(9) {
-webkit-animation-delay:16s;
-moz-animation-delay:16s;
animation-delay:16s;
}
.slider span img:nth-of-type(10) {
-webkit-animation-delay:18s;
-moz-animation-delay:18s;
animation-delay:18s;
}
.slider span img:nth-of-type(11) {
-webkit-animation-delay:20s;
-moz-animation-delay:20s;
animation-delay:20s;
}
.slider span img:nth-of-type(12) {
-webkit-animation-delay:22s;
-moz-animation-delay:22s;
animation-delay:22s;
}
.slider span img:nth-of-type(13) {
-webkit-animation-delay:24s;
-moz-animation-delay:24s;
animation-delay:24s;
}

@-webkit-keyframes overwrap {
    0%  {opacity:0;}
    5%,100% {opacity:1;}
	
}
@-moz-keyframes overwrap {
    0%  {opacity:0;}
    5%,100% {opacity:1;}
	
}
@keyframes overwrap {
    0%  {opacity:0;}
    5%,25% {opacity:1;}
	29%,100%{opacity:000;}
}

###コード（HTML）

<div class="slider">
<span>
	<img src="slide01.jpg" alt="">
	<img src="slide02.jpg" alt="">
	<img src="slide03.jpg" alt="">
	<img src="slide04.jpg" alt="">
	<img src="slide05.jpg" alt="">
	<img src="slide06.jpg" alt="">
	<img src="slide07.jpg" alt="">
	<img src="slide08.jpg" alt="">
	<img src="slide09.jpg" alt="">
	<img src="slide10.jpg" alt="">
	<img src="slide11.jpg" alt="">
	<img src="slide12.jpg" alt="">
	<img src="slide13.jpg" alt="">
</span>
</div>

Comments

[m.ts10806]

プログラムコードは```で囲ってください。（わからなければ質問編集画面でコード部分を選択し<code>ボタンを押してください）

[m.ts10806]

また、htmlソースもあるかと思いますので、あわせてご提示願います。

[nakasan61]

コードを規定の方法で囲っておらず失礼いたしました。HTMLソースを記載いたしました。よろしくお願いいたします。

[m.ts10806]

枚数少なくして調整してみたほうがいいかもしれませんね。例えば３枚くらいで試したときにも何か変な感じがします。３→１と２週目が始まるのが遅かったりとか２週目の１→２が異常に時間かかったりとか。

[m.ts10806]

関係ないとは思いますが、７番目の記述にミスがありますね。　-moz-animation-delay12s;　「:」がありません。記述については他も見直してみてください。

[nakasan61]

記述ミス、失礼いたしました。修正いたしました。数を減らしながら、動きを試してみます。

[m.ts10806]

よろしくお願いします。試した結果が出たらそれも質問に追記してもらえると回答のヒントになることもありますのでよろしくお願いします。

Answer 1

現象1：1週目の最後に数秒止まる
現象2：2週目の最初の2枚が飛ばされ、3枚目からスタートする
これらの原因は、それぞれの画像の表示時間によるものです。

.slider span img:nth-of-type(n+2) にある position:absolute; を外し、
.slider span img にある width:100%; をスライド画像が画面に複数表示される大きさに修正すると
画像が並んで見えますから、表示されるタイミング、フェードアウトするタイミングがよくわかると思います。

詳しく説明すると、
0. 最初に1枚目のスライドが表示されている。
0. 開始時間から2秒遅れで2枚目のスライドが表示される。
0. さらに2秒遅れて3枚目のスライドが表示される（しかし、2枚目のスライドは裏に隠れているだけで表示されたまま）
0. さらに2秒遅れて4枚目のスライドが表示される（同じく2枚目と3枚目は裏で表示されたまま）
0. そこから2秒遅れて5枚目のスライドが表示され、その後ここでやっと2枚目のスライドが消える
（3枚目と4枚目はまだ5枚目の裏で表示されたまま）
：
：

という状態ですので、開始から26秒後（2サイクル目の開始時）には、11枚目～13枚目が表示されている状態であり、一番手前（z-indexが大きい）13枚目が表示されたままであるので、本来なら1枚目が表示されてほしい時間帯は13枚目が表示されたままになります。これが現象1です。
2サイクル目の開始時間から2秒後にスライドの2枚目が表示されるのですが、その時にはまだ12枚目と13枚目が残っており、z-indexの低い2枚目は裏に隠れて見えません。
13枚目が消えるのが、3枚目のスライドが表示された後ですので、そこでやっと3枚目のスライドが見えることになり、現象2が発生します。

最後になりましたが、解決方法としては、1サイクル26秒のうち、表示する期間を2秒だけにするなどして、次のスライドが表示されたら前のを消すようにすればご希望の動作になるかと思います。

2秒表示にする場合：キーフレームの内容を

	0% {opacity:0}
	7.7% {opacity:1}
	15.4% {opacity:0}

などとすればよいのではないでしょうか。（数値は端数があるので微妙かもしれませんが）