HTML DOM スタイルの animationName プロパティの使い方を解説
animationNameプロパティは、CSSの@keyframesルールで定義されたアニメーション名を取得または設定するために使用されるHTML DOMスタイルプロパティです。JavaScriptから動的にアニメーションを切り替えたい場合に便利です。
構文
animationNameプロパティの基本的な構文は以下の通りです。
animationNameプロパティの設定：
object.style.animationName = "none|keyframename|initial|inherit"
指定できる値
animationNameプロパティに設定できる値は以下の4種類です。
| 番号 | 値と説明 |
|---|---|
| 1 | none デフォルト値です。アニメーションが適用されないことを示します。 |
| 2 | keyframename セレクターにバインドする@keyframesで定義したキーフレーム名を指定します。 |
| 3 | initial このプロパティを初期値（none）に設定します。 |
| 4 | inherit 親要素のプロパティ値を継承します。 |
サンプルコード
ここで、animationNameプロパティの具体的な使用例を見てみましょう。ボタンをクリックすると、適用されているアニメーションが別のキーフレームに切り替わります。
<!DOCTYPE html>
<html>
<head>
<style>
div {
width: 60px;
height: 40px;
border: 10px groove fuchsia;
position: relative;
animation-name: bravo;
animation-iteration-count:infinite;
animation-duration: 5s;
}
@keyframes bravo {
from {left: 0px; }
to {left: 600px;}
}
@keyframes NEW_FRAME {
from {left:550px; }
to {left: 0px;}
}
</style>
<script>
function nameChange(){
document.getElementById("DIV1").style.animationName="NEW_FRAME";
document.getElementById("Sample").innerHTML="The animation name is now NEW_FRAME";
}
</script>
</head>
<body>
<div id="DIV1">SAMPLE TEXT</div>
<p>下のボタンをクリックすると、上のアニメーション名が変更されます</p>
<button onclick="nameChange()">CHANGE NAME</button>
<p id="Sample"></p>
</body>
</html>
実行結果
このコードを実行すると、次のような出力が得られます。初期状態では、アニメーションは左から右へ移動します。
CHANGE NAMEボタンをクリックすると、animationNameプロパティが「NEW_FRAME」に変更され、アニメーションは右から左へ移動するように切り替わります。
このように、animationNameプロパティを使えば、JavaScriptから動的に異なるキーフレームアニメーションへ切り替えることができます。インタラクティブなWebページやユーザーの操作に応じた演出を実装したい場合にぜひ活用してみてください。
-
HTML DOM スタイルの transformOrigin プロパティとは？使い方を徹底解説
HTML DOM のスタイルオブジェクトが持つ transformOrigin プロパティは、HTML ドキュメント内の要素に対して 2D または 3D 変換を行う際の「原点（基準点）」を取得・設定するためのプロパティです。要素を回転や拡大縮小させる transform プロパティと組み合わせて使うことで、変換の基準となる位置を自由にコントロールできます。構文（シンタックス）transformOrigin プロパティの基本的な構文は以下のとおりです。値の取得object.style.transformOrigin値の設定object.style.transformOrigin = 値指定できる
-
HTML DOM スタイルの quotes プロパティの使い方を徹底解説
HTML DOM の style オブジェクトの quotes プロパティは、HTML ドキュメント内で引用文を囲むために使用される引用符（クォーテーションマーク）の種類を取得・変更するためのプロパティです。主に <q> 要素や <blockquote> 要素など、引用を表す要素と組み合わせて利用されます。 構文 quotes プロパティの基本的な構文は以下のとおりです。 値の取得 object.style.quotes 値の設定 object.style.quotes = value 設定できる値 value には以下の値を指定できます。 値説明 inheri