【JavaScript】animationendとtransitionendでCSSアニメーションの完了時にイベント処理を行う

const element = document.querySelector('.class');

//animationendの場合
element.addEventLisner('animationend', () => {
	//アニメーション完了後に実行する内容を記述
});

//transitionendの場合
element.addEventLisner('transitionend', () => {
	//アニメーション完了後に実行する内容を記述
});

<!--ロージーの画像-->
<img class="item item1" src="http://develop.logical-studio.com/wp-content/uploads/2019/09/%E3%82%A2%E3%82%BB%E3%83%83%E3%83%88-2.png" alt="ロージー" >

<!--カールの画像-->
<img class="item item2" src="http://develop.logical-studio.com/wp-content/uploads/2019/09/%E3%82%A2%E3%82%BB%E3%83%83%E3%83%88-1.png" alt="カール">

body{
 text-align: center;
}

.item {
  opacity: 0;
  transform: translateY(50%);
}

.item1,
.item2.active {
  animation: itemMove 1s ease both;
}

@keyframes itemMove {
  0% {
    opacity: 0;
    transform: translateY(50%);
  }
  
  50% {
    opacity: 1;
  }
  
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

const item1 = document.querySelector('.item1');
const item2 = document.querySelector('.item2');

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

const item1 = $('.item1');
const item2 = $('.item2');

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