画像をスライド表示(縦スクロール)するCSS

目的

animationを用いスライド表示する。
5秒間隔で下→上に移動しながら画像を切替える。

CSS

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

.ss #s1,
.ss #s2,
.ss #s3 {
position : absolute;
width : 100%;
height : 100%;
top : 100%;
left : 0;
animation-name : slide;
animation-duration : 15s;
animation-iteration-count : infinite;
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 : 5s;
background-image : url(https://public.muragon.com/gcyazd7x/h5ymb4ht.png)
}

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

@keyframes slide {
0% { top : 100%; }
10% { top : 0%; }
33.3% { top : 0%; }
43.3% { left : 0; top : -100% }
50% { left : -100%; top : -100%; }
70% { left : -100%; top : 100%; }
80% { left : 0%; top : 100%; }
}

HTML

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