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

2022.08.20

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

サンプルコード

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

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

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

1
2
3
4
5
6
7
8
9
.sample {
    width: 50px;
    height: 50px;
    background: red;
    transition: transform 3s linear 500ms;
}
.sample.is-move {
    transform: translateX(200px);
}

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
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 アニメーションの開始時で、transition-delayの始まる前に発火。
transitionstart アニメーションの開始時で、transition-delayの終了後に発火。
transitionend アニメーション終了時に発火。アニメーションが途中でキャンセルされた場合は発火しない。
transitioncancel アニメーションがキャンセルされた時に発火。

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

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

1
2
3
4
5
<button id="button">アニメーション実行(1回)</button>
<div id="sample" class="sample"></div>
 
<button id="button2">アニメーション実行(ループ)</button>
<div id="sample2" class="sample2"></div>

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
.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を追加・削除するように設定します。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
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行目が状態に応じて発火するイベントで、それぞれ以下の内容になります。

animationstart アニメーションの開始時で、animation-delayの終了後に発火。
animationend アニメーション終了時に発火。アニメーションが途中でキャンセルされた場合は発火しない。
animationiteration アニメーションの反復が終了し、次の回開始時に発火。animationendと同時には発火しない。
animationcancel アニメーションがキャンセルされた時に発火。

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

参考サイト

関連記事

コメントを残す

メールアドレスが公開されることはありません。
* が付いている欄は必須項目です

CAPTCHA


コメントが承認されるまで時間がかかります。

Category

Tag

Recent

2025年4月
日 月 火 水 木 金 土
 12345
6789101112
13141516171819
20212223242526
27282930