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

HTML DOM スタイルの animation プロパティの使い方を徹底解説

animation プロパティとは

CSS では、要素のプロパティの変化をアニメーションとして表現できます。animation プロパティを使えば、アニメーションに関するスタイルをまとめて定義することが可能です。また、animation-name、animation-duration、animation-iteration-count などの個別のプロパティを、animation キーワードを使って一括して指定することもできます。

構文

animation プロパティの構文は以下の通りです。

object.style.animation = "name duration timingFunction delay iterationCount direction fillMode playState"

設定できる値

animation プロパティに指定できる主な値は次の通りです。

値説明
animation-nameセレクターに紐付けるキーフレーム（@keyframes）の名前を指定します。
animation-durationアニメーションが完了するまでの所要時間を秒（s）またはミリ秒（ms）で指定します。
animation-timing-functionアニメーションの速度カーブ（イージング）を指定します。
animation-delayアニメーションが開始されるまでの遅延時間を指定します。
animation-iteration-countアニメーションの再生回数を指定します。
animation-directionアニメーションを逆再生や交互（alternate）サイクルで再生するかどうかを指定します。
animation-fill-modeアニメーションの実行時間外に適用されるスタイルの値を指定します。
animation-play-stateアニメーションが現在一時停止中か再生中かを指定します。
initialこのプロパティを初期値に設定します。
inherit親要素のプロパティ値を継承します。

サンプルコード

それでは、animation プロパティの具体的な使用例を見てみましょう。ボタンをクリックすると、JavaScript によって div 要素のアニメーションが別のものに切り替わる仕組みです。

<!DOCTYPE html>
<html>
<head>
<style>
    div {
        width: 5px;
        height: 15px;
        background-color: limegreen;
        animation: demo 4s infinite;
    }
    @keyframes demo {
        from {width: 5px; background-color: limegreen;}
        to {width: 400px; background-color: darkgreen;}
    }
    @keyframes demo1 {
        from {height: 5px; background-color: limegreen;}
        to {height: 400px; background-color: darkgreen;}
    }
</style>
<script>
    function changeAnimation() {
        document.getElementById("DIV1").style.animation = "demo1 4s 2";
    }
</script>
</head>
<body>
<button onclick="changeAnimation()">CHANGE ANIMATION</button>
<p>上のボタンをクリックすると、下のアニメーションが切り替わります</p>
<div id="DIV1"></div>
</body>
</html>

実行結果

このコードを実行すると、最初は横方向に幅が広がりながら色が変化するアニメーションが表示されます。

HTML DOM スタイルの animation プロパティの使い方を徹底解説

「CHANGE ANIMATION」ボタンをクリックすると、今度は縦方向に高さが伸びていくアニメーションに切り替わり、再生回数も 2 回に設定されます。

HTML DOM スタイルの animation プロパティの使い方を徹底解説

まとめ

DOM の style.animation プロパティを使えば、JavaScript から動的に CSS アニメーションを制御できます。@keyframes で定義したアニメーションを組み合わせることで、ユーザーの操作に応じた柔軟な演出が実現可能です。ぜひ実際のプロジェクトでも活用してみてください。

  1. HTML DOM スタイル animationPlayState プロパティの使い方を解説

    animationPlayState プロパティは、CSS アニメーションの状態（実行中か一時停止中か）を取得・設定するために使用されます。このプロパティを活用することで、JavaScript からアニメーションの再生と一時停止を動的に切り替えることができ、インタラクティブな Web ページの作成に非常に便利です。 構文 animationPlayState プロパティを設定する場合の構文は以下の通りです。 object.style.animationPlayState = running|paused|initial|inherit; 設定できる値 animationPlayState プロ

  2. HTML DOM スタイルの animationIterationCount プロパティとは？使い方と設定方法を解説

    animationIterationCount プロパティは、CSS アニメーションが再生される回数を設定または取得するために使用される HTML DOM のスタイルプロパティです。このプロパティを使うことで、JavaScript から動的にアニメーションの繰り返し回数を制御できます。 構文（Syntax） animationIterationCount プロパティの基本的な構文は以下の通りです。 ■ animationIterationCount プロパティを設定する場合： object.style.animationIterationCount = number|infinite|init