JavaScriptの.addEventListenerのanimationendでアニメーションさせながら画像を時間差で表示

document.getElementById('element').addEventListener('event', () => {
// ここに処理内容
});

<div class="animeObj">
<!-- 画像3種 -->
<img src="https://dubdesign.net/wp-content/uploads/2022/07/obj002.svg" alt="左" class="item item2">
<img src="https://dubdesign.net/wp-content/uploads/2022/07/obj001.svg" alt="真ん中" class="item item1">
<img src="https://dubdesign.net/wp-content/uploads/2022/07/obj003.svg" alt="右" class="item item3">
<!-- 画像3種 -->
</div>
<button id="animeBtn"><i class="fas fa-play-circle"></i> アニメーション開始</button>

// 各要素を取得
const item1 = document.querySelector('.item1');
const item2 = document.querySelector('.item2');
const item3 = document.querySelector('.item3');
const animeBtn = document.getElementById('animeBtn');

// ボタンクリックの処理
animeBtn.addEventListener('click', () => {
  // item2〜3はclass削除。item1はトグルでclass追加・削除。
  item2.classList.remove('active');
  item3.classList.remove('active');
  item1.classList.toggle('active');
});

item1.addEventListener('animationend', () => {
  // item1のアニメーションが完了したらitem2に.activeを付与
  item2.classList.add('active');
});


item2.addEventListener('animationend', () => {
  // item2のアニメーションが完了したらitem3に.activeを付与
  item3.classList.add('active');
});

/* コンテナ */
.animeObj {
    display: flex;
    align-items: flex-end;
    justify-content: center;
    margin-bottom: 30px;
    gap: 25px;
    background: url(https://dubdesign.net/wp-content/uploads/2022/07/samplebg.svg)no-repeat;
    background-size: cover;
    background-position-y: bottom;
    height: 320px;
    padding-bottom: 30px;
}
/*各item */
.animeObj .item {
    width: 100%;
    max-width: 80px;
    opacity: 0;
    transform: translateY(50%);
}
/* クリックでactive付与後 */
.item1.active,
.item2.active, .item3.active {
  animation: itemMove 1s ease both;
}

/* アニメーションを定義 */
@keyframes itemMove {
  0% {
    opacity: 0;
    transform: translateY(50%);
  } 
  50% {
    opacity: 1;
  }  
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}