CSSアニメーションの再生が終了したタイミングでJavaScriptの処理を実行するコードと実行結果を紹介します。
CSSアニメーションの再生が完了したタイミングで処理を実行したい場合があります。
CSSアニメーションの完了は animationend イベントで検出できます。
ページ読み込み時にCSSアニメーションの要素にanimationend イベントのイベントリスナーを設定して実装します。
下記のHTMLファイルを作成します。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<link rel="stylesheet" href="PlayComplete.css" />
<script type="text/javascript">
window.addEventListener('load', () => {
var elem = document.getElementById('img01');
elem.addEventListener('animationend', () => {
var outelem = document.getElementById('output');
outelem.innerText = "アニメーションの再生が終了しました。";
});
});
function startAnimation() {
var elem = document.getElementById('img01');
elem.classList.add("charmove");
}
</script>
</head>
<body>
<div>
<a href="javascript:startAnimation();">start</a>
</div>
<img id="img01" class="charimg" src="char.svg" />
<div id="output"></div>
</body>
</html>
.charimg {
width:120px;
}
.charimg.charmove {
animation: charrotate 2s linear;
animation-fill-mode: forwards;
}
@keyframes charrotate {
0% {
transform: rotate(0px);
}
100% {
transform: rotate(270deg);
}
}
[start]リンクのクリックでアニメーションを再生します。
<a href="javascript:startAnimation();">start</a>
アニメーション再生のコードは以下です。詳細はこちらの記事を参照してください。
function startAnimation() {
var elem = document.getElementById('img01');
elem.classList.add("charmove");
}
animationend イベントのイベントリスナーを設定するコードが以下です。
window.addEventListener('load', () => {
var elem = document.getElementById('img01');
elem.addEventListener('animationend', () => {
var outelem = document.getElementById('output');
outelem.innerText = "アニメーションの再生が終了しました。";
});
});
window.addEventListener('load' ... ); のコードにより、ページ表示時のloadイベントリスナーを設定します。animationend イベントリスナーを追加しています。
animationendイベントでは、id="output" の要素に 「アニメーションの再生が終了しました。」のメッセージを表示する動作を実装しています。
var elem = document.getElementById('img01');
elem.addEventListener('animationend', () => {
var outelem = document.getElementById('output');
outelem.innerText = "アニメーションの再生が終了しました。";
}
アニメーションが終了すると、画面下部の id="output" の要素に「アニメーションの再生が終了しました。」のテキストが表示される動作となります。
charrotateを指定してアニメーションを再生します。
animation-fill-mode: forwards;が設定されているため、アニメーションの再生完了は初期状態に戻らず最後のフレームの状態のままアニメーションが止まります。
詳しくはこちらの記事を参照してください。
.charimg.charrotate {
animation: moveframe 2s linear;
animation-fill-mode: forwards;
}
charrotateキーフレームの設定が以下です。270度要素を回転させるアニメーションです。
@keyframes charrotate {
0% {
transform: rotate(0px);
}
100% {
transform: rotate(270deg);
}
}
上記のHTTMLファイルをWebブラウザで表示します。下図のページが表示されます。
[start]リンクをクリックします。画像の回転アニメーションが始まります。
画像が270度回転するとアニメーションが終了し、ページの下部に「アニメーションの再生が終了しました。」のメッセージが表示されます。
アニメーションの再生完了のタイミングで処理を実行できました。
