CSSアニメーションのイベントを試してみる

transitionやanimationを使ったアニメーションで、開始時や終了時をJavaScriptで取得する方法を試してみます。

サンプルコード

ボタンクリック時にtransitionやanimationでアニメーションする要素を用意して、各イベントを試してみます。
まずはtransitionです。

<button id="button">アニメーション実行</button>
<div id="sample" class="sample"></div>

要素に.is-moveが追加された時に、transitionでアニメーションするようにします。

.sample {
	width: 50px;
	height: 50px;
	background: red;
	transition: transform 3s linear 500ms;
}
.sample.is-move {
	transform: translateX(200px);
}

ボタンクリック時に.is-moveを追加・削除するように設定します。

const button = document.getElementById('button');
const element = document.getElementById('sample');
button.addEventListener('click', function() {
	element.classList.toggle('is-move');
}, false);
element.addEventListener('transitionrun', function() {
	console.log('transitionrun');
}, false);
element.addEventListener('transitionstart', function() {
	console.log('transitionstart');
}, false);
element.addEventListener('transitionend', function() {
	console.log('transitionend');
}, false);
element.addEventListener('transitioncancel', function() {
	console.log('transitioncancel');
}, false);

transitionのデモページ
6〜17行目がtransiton中の状態に応じて発火するイベントで、それぞれ以下の内容になります。

上記のうちtransitionrunとtransitionstart、transitioncancelに関しては実験的な機能となっているようなので、使用する際はご注意ください。

次にanimationを試してみます。
animationは繰り返す回数が1回とループの2種類を用意します。

<button id="button">アニメーション実行(1回)</button>
<div id="sample" class="sample"></div>

<button id="button2">アニメーション実行(ループ)</button>
<div id="sample2" class="sample2"></div>

transitionと同じく、要素に.is-moveが追加された時にアニメーションするようにします。

.sample,
.sample2 {
	width: 50px;
	height: 50px;
	background: red;
}
.sample.is-move {
    animation: sample 3s linear 500ms;
} 
.sample2.is-move {
    animation: sample 3s linear 500ms infinite alternate;
} 
@keyframes sample {
    0% {
		transform: translateX(0);
    }
    100% {
		transform: translateX(200px);
    }
}

ボタンクリック時に.is-moveを追加・削除するように設定します。

const button = document.getElementById('button');
const element = document.getElementById('sample');
button.addEventListener('click', function() {
	element.classList.toggle('is-move');
}, false);
element.addEventListener('animationstart', function() {
	console.log('animationstart');
}, false);
element.addEventListener('animationend', function() {
	console.log('animationend');
}, false);
element.addEventListener('animationiteration', function() {
	console.log('animationiteration');
}, false);
element.addEventListener('animationcancel', function() {
	console.log('animationcancel');
}, false);

const button2 = document.getElementById('button2');
const element2 = document.getElementById('sample2');
button2.addEventListener('click', function() {
	element2.classList.toggle('is-move');
}, false);
element2.addEventListener('animationstart', function() {
	console.log('animationstart');
}, false);
element2.addEventListener('animationend', function() {
	console.log('animationend');
}, false);
element2.addEventListener('animationiteration', function() {
	console.log('animationiteration');
}, false);
element2.addEventListener('animationcancel', function() {
	console.log('animationcancel');
}, false);

animationのデモページ
6〜17、24〜35行目が状態に応じて発火するイベントで、それぞれ以下の内容になります。

上記のうちanimationcancelだけ実験的な機能となっています。