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

cssアニメーションの開始時や終了時などに処理を加えたいと思ったことはありませんか?

javascriptを使えばcssアニメーション(animationもしくはtransition)の開始や終了を取得できるイベントが用意されていますのでこの記事ではその方法をご紹介します。

目次

前提としてアニメーション部分の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() {
  //ここに書いたのもがアニメーション終了時に実行されます
});

最後に

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