フェードアウトで画像を切り替える

今更ながらフェードアウトで画像を切り替える

本来ならスクリプトを使わないでできる














<!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>