HTML
 Computer >> コンピューター >  >> プログラミング >> HTML

HTML DOM AnimationEventとは？使い方とプロパティを実例付きで解説

HTML DOM の AnimationEvent は、CSS アニメーションの実行時に発生するさまざまなイベントを処理するための JavaScript オブジェクトです。アニメーションに関連するイベント情報を取得でき、どのイベントがアニメーションをトリガーしたのかを把握することで、CSS アニメーションをより柔軟かつ精密に制御することが可能になります。

AnimationEvent の主なプロパティ

AnimationEvent には、以下のプロパティが用意されています。

プロパティ説明
animationName実行中のアニメーションの名前（@keyframes で定義した名前）を返します。
elapsedTimeアニメーションが開始されてから経過した時間を秒単位で返します。
pseudoElementアニメーションの対象となっている疑似要素の名前を返します。例：::before、::after、::first-line など。

構文

AnimationEvent のプロパティにアクセスする基本的な構文は以下のとおりです。

animationEvent.property

AnimationEvent が発生するイベントの種類

AnimationEvent は、主に次の3種類のイベントで発生します。

  • animationstart … CSS アニメーションが開始されたときに発生
  • animationiteration … アニメーションの1回分が終了し、次の反復が始まるときに発生
  • animationend … アニメーションが完了したときに発生

サンプルコード

それでは、実際に AnimationEvent を使用した具体例を見ていきましょう。

<!DOCTYPE html>
<html>
<head>
<style>
    #ANIM-DIV {
        margin: 10px;
        width: 400px;
        height: 100px;
        background: lightgreen;
        position: relative;
        font-size: 30px;
        animation-name: animMove;
        animation-duration: 5s;
    }
    @-webkit-keyframes animMove {
        from {top: 0px;}
        to {top: 200px;}
    }
</style>
</head>
<body>
<div id="ANIM-DIV"></div>
<script>
    var x = document.getElementById("ANIM-DIV");
    x.addEventListener("animationstart", myAnimFunction);
    function myAnimFunction(event) {
        this.innerHTML = "The animation-name is: " + event.animationName;
    }
</script>
</body>
</html>

注意： 上記のコードは Chrome 74.0.3729.169 で動作確認を行っています。実際に利用する際は、お使いのブラウザが AnimationEvent に対応しているかどうかをご確認ください。

実行結果

上記のコードを実行すると、まず次のような表示になります。

HTML DOM AnimationEventとは？使い方とプロパティを実例付きで解説

その後、5 秒が経過すると要素は下方向へ移動します。

HTML DOM AnimationEventとは？使い方とプロパティを実例付きで解説

サンプルコードの解説

上記の例では、以下のような処理を行っています。

まず、div 要素を使って 400px × 100px の長方形ボックスを作成しています。背景色には lightgreen を指定し、animation-name と animation-duration によってアニメーションの内容と再生時間を設定しました。

#ANIM-DIV {
    margin: 10px;
    width: 400px;
    height: 100px;
    background: lightgreen;
    position: relative;
    font-size: 30px;
    animation-name: animMove;
    animation-duration: 5s;
}

続いて、@keyframes を使ってアニメーションにおける div の移動開始位置（from）と終了位置（to）を指定しています。これにより、ボックスが上から 200px 下方向へゆっくりと移動するアニメーションが実現されます。

@-webkit-keyframes animMove {
    from {top: 0px;}
    to {top: 200px;}
}

さらに、addEventListener() で animationstart イベントを登録しているため、アニメーションが開始された瞬間にイベントハンドラが呼び出され、event.animationName の値（ここでは「animMove」）が画面上に表示されます。

  1. HTML DOM HRオブジェクトとは？作成方法と使い方を解説

    HTML DOM の HR オブジェクトは、HTML 文書内の <hr> 要素を表すオブジェクトです。<hr> 要素は、コンテンツの話題やテーマの区切りを視覚的に示す水平線（罫線）として表示されます。JavaScript を使えば、この水平線を動的に生成してページに挿入することも可能です。ここでは、HR オブジェクトの基本的な作成方法と実践的な使用例を紹介します。HRオブジェクトの作成方法（構文）hr オブジェクトを新しく作成するには、document.createElement() メソッドを使用します。構文は以下のとおりです。document.createEleme

  2. HTML DOM Ulオブジェクトとは？<ul>要素の操作方法とサンプルコードを解説

    HTML DOM の Ul オブジェクトは、HTML の <ul>（順序なしリスト）要素を表すオブジェクトです。JavaScript を使うことで、リストの動的な生成や操作が可能になります。 <ul> 要素の作成方法 新しい <ul> 要素を作成するには、document.createElement() メソッドを使用します。 var ulObject = document.createElement(UL) HTML5で非推奨となったプロパティ ulObject には以下のプロパティが存在しますが、これらは HTML5 ではサポートされていないため注