JavaScriptの質問をしたり答えたりする掲示板

JavaScript初心者です。簡単なアニメーションを作りたいのですが実装方法がわからず困っています。

・やりたいこと
4枚の画像が0.1秒毎にズームしながら切り替わり、0.5秒毎にズームしながら画像を3秒間表示する。

説明が分かりにくくすみません。つまり、
1.png→2.png→3.png→4.png→1.png→2.png…の順で0.1秒ごとにパッパッパっと画像が切り替わって、一周して1.pngに戻ってきた時に3秒表示。またパッパっと切り替わって、一周して2.pngに来た時に3秒表示…みたいなものが作りたいです。

ズームしながら0.1秒毎に切り替えまでは調べて分かりましたが、「0.5秒毎に3秒表示」の部分がつまっています。
なんとなくsetTimeoutを使うんだろうということは分かるのですが書き方が分からず、ご教授頂けないでしょうか。
動きの部分はcssで行っています。また、フェードインと記載してますが実際はフェードではなく切り替わる感じにしています。

html

    <ul id="slide_wrapp">
      <li class="slide_item"><img src="img/1.png" alt=""></li>
      <li class="slide_item"><img src="img/2.png" alt=""></li>
      <li class="slide_item"><img src="img/3.png" alt=""></li>
      <li class="slide_item"><img src="img/4.png" alt=""></li>
    </ul>

JavaScript

function sliderStart() {

    const slide = document.getElementById('slide_wrapp');      //スライダー親
    const slideItem = slide.querySelectorAll('.slide_item');   //スライド要素
    const totalNum = slideItem.length - 1;                     //スライドの枚数を取得
    const FadeTime = 1000;                                     //フェードインの時間
    const IntarvalTime = 100;                                 //クロスフェードさせるまでの間隔
    let actNum = 0;                                            //現在アクティブな番号
    let nowSlide;                                              //現在表示中のスライド
    let NextSlide;                                             //次に表示するスライド

    // スライドの1枚目をフェードイン
    slideItem[0].classList.add('show_', 'zoom_');

    // 処理を繰り返す
    setInterval(() => {
        if (actNum < totalNum) {

            let nowSlide = slideItem[actNum];
            let NextSlide = slideItem[++actNum];

            //.show_削除でフェードアウト
            nowSlide.classList.remove('show_');
            // と同時に、次のスライドがズームしながらフェードインする
            NextSlide.classList.add('show_', 'zoom_');
            //フェードアウト完了後、.zoom_削除
            setTimeout(() => {
                nowSlide.classList.remove('zoom_');
            }, FadeTime);

        } else {

            let nowSlide = slideItem[actNum];
            let NextSlide = slideItem[actNum = 0];

            //.show_削除でフェードアウト
            nowSlide.classList.remove('show_');
            // と同時に、次のスライドがズームしながらフェードインする
            NextSlide.classList.add('show_', 'zoom_');
            //フェードアウト完了後、.zoom_削除
            setTimeout(() => {
                nowSlide.classList.remove('zoom_');
            }, FadeTime);
        };
    }, IntarvalTime);

}

CSS

#slide_wrapp{
  position: relative;
  overflow: hidden;
  padding: 0;
  width: 500px;
}
  .slide_item{
    opacity: 0;
    transform: scale(1);
    transition: opacity 0.01s linear, transform 1s linear;  //秒数に注意
    position: relative;
    z-index: 1;
}
   .slide_item:not(:first-child){
      position: absolute;
      top: 0;
      left : 0;
}

  .slide_item.show_{
      opacity: 1;
}
  .slide_item.zoom_{
      transform: scale(1.02);
}
  .slide_item img{
      display: block; //下に余白ができないように
}

何卒よろしくお願いします。