画像をスライド表示(スイッチ)するCSS

目的

animationを用いスライド表示する。
3秒間隔で画像を切替える。

CSS

.ss {
position : relative;
width : 表示幅;
height : 表示高さ;
overflow : hidden;
}

.ss #s1,
.ss #s2,
.ss #s3 {
position : absolute;
width : 100%;
height : 100%;
animation-name : slide;
animation-duration : 9s;
animation-iteration-count : infinite;
animation-timing-function : linear;
background-size : cover;
background-position : center;
opacity : 0;
}

.ss #s1 {
animation-delay : 0s;
background-image : url("画像13のURL")
}

.ss #s2 {
animation-delay : 3s;
background-image : url("画像2のURL")
}

.ss #s3 {
animation-delay : 6s;
background-image : url("画像3のURL")
}

@keyframes slide {
0% { opacity : 1; }
33.3% { opacity : 1; }
33.4% { opacity : 0; }
}

HTML

<div class="ss">
<div id="s1"></div>
<div id="s2"></div>
<div id="s3"></div>
</div>