CSSアニメーションの開始時・終了時・ループ時にjavascriptで処理をする方法

前提としてアニメーション部分のhtmlとcssは下記のものを使用します

HTML

<div class="animation__item"></div>

CSS

animation用です。

.animation__item {
  width: 50%;
  height: 100px;
  background: #E4357B;
  transform-origin: left center;
  &.is-animated {
    animation: sample01 2s ease-out 5;
  }
}

@keyframes sample01 {
  0% {
    transform:scaleX(0);
  }
  100% {
    transform:scaleX(1);
  }
}

transition用です

.c-transition__item {
  width: 50%;
  height: 100px;
  background: #E4357B;
  transform-origin: left center;
  transform:scaleX(1);
  &.is-animated {
    transition: 2s transform ease-out;
    transform:scaleX(0);
  }
}

animationの場合

下記の3点をご紹介します。

• 開始
• ループ
• 終了

デモ

デモを用意しましたので御覧ください。

開始時

//javascriptの記述
document.querySelector('.animation__item').addEventListener('animationstart', () => {
  //ここに書いたのもがアニメーション開始時に実行されます
});

//jQueryの記述
$('.animation__item').on('animationstart', function() {
  //ここに書いたのもがアニメーション開始時に実行されます
});

ループ時

//javascriptの記述
document.querySelector('.animation__item').addEventListener('animationiteration', () => {
  //ここに書いたのもがアニメーションループ時に実行されます
});

//jQueryの記述
$('.animation__item').on('animationiteration', function() {
  //ここに書いたのもがアニメーションループ時に実行されます
});

終了時

//javascriptの記述
document.querySelector('.animation__item').addEventListener('animationend', () => {
  //ここに書いたのもがアニメーション終了時に実行されます
});

//jQueryの記述
$('.animation__item').on('animationend', function() {
  //ここに書いたのもがアニメーション終了時に実行されます
});

transitionの場合

下記の2点をご紹介します。

• 開始
• 終了

デモ

デモを用意しましたので御覧ください。

開始時

//javascriptの記述
document.querySelector('.animation__item').addEventListener('transitionstart', () => {
  //ここに書いたのもがアニメーション開始時に実行されます
});

//jQueryの記述
$('.animation__item').on('transitionstart', function() {
  //ここに書いたのもがアニメーション開始時に実行されます
});

終了時

//javascriptの記述
document.querySelector('.animation__item').addEventListener('transitionend', () => {
  //ここに書いたのもがアニメーション終了時に実行されます
});

//jQueryの記述
$('.animation__item').on('transitionend', function() {
  //ここに書いたのもがアニメーション終了時に実行されます
});

最後に

この方法を用いれば表現の幅が広がると思いますので、試してみてはいかがでしょうか。