今更ながらフェードアウトで画像を切り替える
本来ならスクリプトを使わないでできる
<!DOCTYPE html>
<meta charset="UTF-8">
<title></title>
<style>
.fade_out_change {
position: relative;
}
.fade_out_change > * {
position: absolute;
left: 0;
top: 0;
}
.chgTypeA {
height: 200px;
}
.chgTypeB {
height: 100px;
}
.chgTypeA > *:last-of-type {
animation: 3s fadeOut 4s forwards;
}
.chgTypeB > *:last-of-type {
animation-name: fadeOut;
animation-duration: 1s; /*アニメーション時間*/
animation-delay: 3s; /*開始まで遅らせる時間*/
animation-timing-function: ease; /* ease, ease-in, ease-out, linear, steps, cubic-bezier */
animation-fill-mode: none; /*none, forwards, backwards, both*/
animation-iteration-count: 1; /* infinite */
animation-direction: normal; /*normal, reverse, alternate, alternate-reverse*/
}
@keyframes fadeOut { from { opacity: 1; } to { opacity: 0; }}
</style>
<body>
<div id="A" class="fade_out_change chgTypeA">
<img src="https://picsum.photos/600/200?random=1">
<img src="https://picsum.photos/600/200?random=2">
<img src="https://picsum.photos/600/200?random=3">
<img src="https://picsum.photos/600/200?random=4">
</div>
<div id="B" class="fade_out_change chgTypeB">
<img src="https://picsum.photos/400/100?random=5">
<img src="https://picsum.photos/400/100?random=6">
<img src="https://picsum.photos/400/100?random=7">
<img src="https://picsum.photos/400/100?random=8">
</div>
<script>
const moveFirst = e=> e.parentNode.prepend (e);
A.addEventListener('animationend', event => moveFirst (event.target));
B.addEventListener('animationend', event => moveFirst (event.target));
</script>
