JavaScript - CSSアニメーションの開始と終了を検出する

JavaScriptでCSSで実行しているアニメーションの開始と終了を検出するイベントの実装方法とコード例を作成しています。

HTMLには、CSSアニメーションを検出する対象にid名「#target」を指定ています。

<div class="item-container">
	<div id="target"></div>
	<p id="output">アニメーション待機中</p>
</div>

CSSでは、対象の要素にシンプルな回転アニメーションを指定しています。
アニメーションは3秒後に開始します。

#target {
	width: 100px;
	height: 100px;
	background: #4169e1;
	animation: rotate-anim 3s 3s linear;
}

@keyframes rotate-anim {
	0% {
		transform: rotate(0deg);
	}

	100% {
		transform: rotate(360deg);
	}
}


.item-container {
	width: 100%;
	margin: 20px;
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	align-items: center;
	gap: 10px;
}

#output {
	padding: 10px;
	width: 100%;
	text-align: center;
}

対象の要素にaddEventListener()でアニメーションの開始と終了をトリガーにしたイベントを実装しています。
それぞれ「animationstart」「animationend」を指定する事で実行する事ができます。

// CSSアニメーションの開始を検出する
document.querySelector('#target').addEventListener(`animationstart`, () => {
	document.querySelector('#output').textContent = 'アニメーション開始';
});

// CSSアニメーションの終了を検出する
document.querySelector('#target').addEventListener(`animationend`, () => {
	document.querySelector('#output').textContent = 'アニメーション終了';
});