JavaScript | CSSアニメーションの開始と終了イベントを実装する方法

2022-01-31JavaScript イベント,JavaScript

JavascriptでCSSアニメーションが開始された時に発火するイベント、CSSアニメーションが終了をトリガーに発火するイベントの実装方法を紹介しています。

CSSアニメーションの開始と終了イベントの実装サンプル

JavascriptのaddEventListener()を使ったCSSアニメーションの開始または終了イベントの実装サンプルとサンプルコードになります。

See the Pen JavaScript | Focus event by yochans (@yochans) on CodePen.

HTMLにはCSSアニメーションを指定する<div>をひとつ設置しています。

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

CSSで要素を横にスライドするアニメーションを指定しています。

また、確認しやすいように開始時間を遅延させて少し遅らせています。

#item {
	width: 34px;
	padding: 20px;
	color: #FFF;
	background: #0091EA;
	animation: slide-anim 3s 3s linear forwards;
}

@keyframes slide-anim {
	0% {
		transform: translateX(0px);
	}

	100% {
		transform: translateX(300px);
	}
}

対象とするアニメーションが指定されている要素をquerySelector()で変数「item」として取得しています。

CSSアニメーション開始をトリガーにした発火イベントはaddEventListener()で「animationstart」を指定、終了時の発火イベントには「animationend」を指定しています。

サンプルではイベント発生時に要素の中のテキストを変更しています。

let item = document.querySelector(`#item`);

// animation start
item.addEventListener(`animationstart`, () => {
	item.textContent = '開始';
});

// animation end
item.addEventListener(`animationend`, () => {
	item.textContent = '終了';
});