画像をスライド表示(フェード)する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;
opacity : 0;
background-size : cover;
background-position : center;
}

.ss #s1 {
animation-delay : 0s;
background-image : url(https://public.muragon.com/gcyazd7x/caxxk0pq.png)
}

.ss #s2 {
animation-delay : 3s;
background-image : url(https://public.muragon.com/gcyazd7x/h5ymb4ht.png)
}

.ss #s3 {
animation-delay : 6s;
background-image : url(https://public.muragon.com/gcyazd7x/ksnhlmaz.png)
}

@keyframes slide {
10% { opacity : 1; }
36.67% { opacity : 1; }
46.67% { opacity : 0; }
}

HTML

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