cssで3つの画像をスライドショーにしたいです

Question

cssで画像のスライドショーを作りたいです

htmlで

<div class="top-section top1">
        </div>

        <div class="top-section top2">
                </div>

        <div class="top-section top3">
                        </div>

コード

cssで

.top1,.top2,.top3 {
	-webkit-animation-duration: 10s;	
	animation-duration: 10s;			
	-webkit-animation-iteration-count:infinite;	
	animation-iteration-count:infinite;			
}

.top1{
	background-image:url("img/fv-top.jpg");
	-webkit-animation-name: top1;		
	animation-name: top1;				
}

.top2{
	background-image:url("img/fv-top2.jpg");
	-webkit-animation-name: top2;		
	animation-name: top2;
}

.top3{
	background-image:url("img/fv-top3.jpg");
	-webkit-animation-name: top3;		
	animation-name: top3;				
}

@keyframes top1 {
	0% {opacity: 0;}
	10% {opacity: 1;}
	30% {opacity: 1;}
	40% {opacity: 0;}
	100% {opacity: 0;}
}


@keyframes top2 {
	0% {opacity: 0;}
	30% {opacity: 0;}
	40% {opacity: 1;}
	60% {opacity: 1;}
	70% {opacity: 0;}
	100% {opacity: 0;}
}


@keyframes top3 {
	0% {opacity: 0;}
	60% {opacity: 0;}
	70% {opacity: 1;}
	90% {opacity: 1;}
	100% {opacity: 0;}
}

.top-section{
	width:100%;
	height: 600px;
  padding-top:180px;
  position: relative;
	text-align: center;
	margin-top: 50px;
	margin-bottom:-100px;
}

.top-section::before{
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  content: ' ';
}

.top-section h1{
  font-size:45px;
  letter-spacing:12px;
  color:#fff;
  opacity:0.9;
  font-weight: bold;
}

.top-section p{
  font-size:30px;
  letter-spacing:4px;
  color:#fff;
  opacity:0.9;
  font-weight: bold;
}

.top-section{
	padding-top:140px;
	padding-bottom:60px;
  height:300px;
}

  .top-section h1{
    font-size:25px;
		width:100%;
		margin-left:20px;
		text-align: left;
  }

  .top-section p{
    font-size:18px;
		width:90%;
		margin-left:20px;
		text-align: left;
  }

コード

このようなコードなのですが、うまく同じ場所でスライドショーが作成できません。
同じtop-sectionのなかでtop1,top2,top3を順番に同じ場所でスライドショーをするにはどのように直せばいいかご教授お願いいたします。現在この状態では3つのdivが重ならない状態でスライドショーになってしまいます。私は3つの画像を同じ場所でスライドショーで入れ替わるようにしたいです。

Comments

[kei344]

質問文のコードはそれぞれコードブロックで囲んでいただけませんか？ ```（バッククオート3つ）で囲み、前後に改行をいれるか、コードを選択して「<code>」ボタンを押すとコードブロックになります。また、「うまくできない」とは「何をしたときに」「どうなると思って」「どうなったのか」を、具体的に記述されたほうが回答を得られやすいと思います。

[mogumog]

ご指摘ありがとうございます。編集いたしました。

Answer 1

<div class="top-section-wrap">
	<div class="top-section top1"></div>
	<div class="top-section top2"></div>
	<div class="top-section top3"></div>
</div>

.top-section-wrap {
	position: relative;
}

.top-section{
	position: absolute;
	left: 0;
	top: 0;
}
```**動くサンプル：**[https://jsfiddle.net/va3nj031/](https://jsfiddle.net/va3nj031/)

Comments

[mogumog]

回答していただきまして、誠にありがとうございます。