【JavaScript】CSSアニメーションの開始・終了を取得してトリガーイベント

2018年3月6日2019年6月12日CSS,JavaScript,CSSアニメーション,イベント

「Animation Events」はCSSのアニメーションの状態を取得してトリガーイベントを実装できます

https://developer.mozilla.org/en-US/docs/Web/API/AnimationEvent/initAnimationEvent

「Animation Events」で取得できるイベントは「animationsyart（開始時）」「animationiteration（繰り返し開始時）」「animationend（終了時）」

動作サンプル

See the Pen Animation Events by yochans (@yochans) on CodePen.

CSSで3回繰り返し処理をしたアニメーションの状態をトリガーにした発火イベントになります

サンプルコード

HTML

<div id="item"></div>

CSS

div{
  width:100px;
  height:100px;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #01579B;
  margin:10px 0;
  color:#FFF;
  animation: key1 2s 4 alternate;
}

@keyframes key1{
  0% {transform: rotate(0deg);}
  100% {transform: rotate(360deg);}
}

JavaScript

//対象のclassを定義
let item = document.getElementById('item');

//アニメーション開始時
item.addEventListener('animationstart', () => {
　　　　item.textContent = `START`;
}, false);

//アニメーション繰り返し開始時
item.addEventListener('animationiteration', () => {
　　　　item.textContent = `ITERATION`;
}, false);

//アニメーション終了時
item.addEventListener('animationend', () => {
　　　　item.textContent = `END`;
}, false);

トランジションアニメーションの場合

animationではなくtransitionの場合は「transitionstart」「transitionend」で利用できます