CSSアニメーションの再生が終了したタイミングで処理を実行するコードを紹介します。
概要
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イベントリスナーを設定します。
loadイベント内でCSSアニメーションの要素を取得し、アニメーションの要素に
animationend イベントリスナーを追加しています。
animationendイベントでは、id="output" の要素に 「アニメーションの再生が終了しました。」のメッセージを表示する動作を実装しています。
var elem = document.getElementById('img01');
elem.addEventListener('animationend', () => {
var outelem = document.getElementById('output');
outelem.innerText = "アニメーションの再生が終了しました。";
}
アニメーションが終了すると、画面下部の
id="output" の要素に「アニメーションの再生が終了しました。」のテキストが表示される動作となります。
CSSのアニメーション設定は下記のコードです。2秒間のアニメーションで、キーフレームの
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度回転するとアニメーションが終了し、ページの下部に「アニメーションの再生が終了しました。」のメッセージが表示されます。
アニメーションの再生完了のタイミングで処理を実行できました。
著者
iPentecのメインデザイナー
Webページ、Webクリエイティブのデザインを担当。PhotoshopやIllustratorの作業もする。
最終更新日: 2022-05-06
作成日: 2022-05-06
