HTML DOM StyleのtransitionPropertyプロパティの使い方を徹底解説
HTML DOM の transitionProperty プロパティは、HTMLドキュメント内の要素に適用されるトランジション（遷移）効果の対象となるCSSプロパティ名を取得・設定するために使用されます。このプロパティを活用することで、JavaScriptから動的に「どのCSSプロパティをアニメーションさせるか」を柔軟に制御できるようになります。
構文
transitionPropertyプロパティの基本的な構文は以下のとおりです。
1. 値を取得する場合
object.transitionProperty
2. 値を設定する場合
object.transitionProperty = "value"
value には以下の値を指定できます。
| 値 | 説明 |
|---|---|
| initial | このプロパティの値をデフォルト値に設定します。 |
| inherit | 親要素からこのプロパティの値を継承します。 |
| all | すべてのプロパティにトランジション効果を適用します。 |
| property | トランジション効果の対象となるCSSプロパティ名のリストを指定します（カンマ区切りで複数指定可能）。 |
| none | どのプロパティにもトランジション効果を適用しません。 |
それでは、HTML DOM Style transitionPropertyプロパティの具体的な使用例を見てみましょう。
サンプルコード
<!DOCTYPE html>
<html>
<style>
body {
color: #000;
height: 100vh;
}
.btn {
background: #db133a;
border: none;
height: 2rem;
border-radius: 2px;
width: 40%;
display: block;
color: #fff;
outline: none;
cursor: pointer;
margin: 1rem 0;
}
.circle {
height: 100px;
width: 100px;
background-color: #db133a;
}
.circle:hover {
height: 200px;
width: 200px;
border-radius: 50%;
transition: all 1s;
}
.show {
font-size: 1.2rem;
margin: 1rem 0;
}
</style>
<body>
<h1>DOM Style transitionProperty プロパティ デモ</h1>
<div class='circle'></div>
<button onclick="set()" class="btn">transitionProperty を変更</button>
<div class="show">四角形にマウスカーソルを合わせてください</div>
<script>
function set() {
document.querySelector('.circle').style.transitionProperty = "border-radius";
}
</script>
</body>
</html>
実行結果
「transitionProperty を変更」ボタンをクリックした後、「赤い」四角形にマウスカーソルを合わせると、transitionPropertyの効果を確認できます。ボタンをクリックする前はすべてのプロパティ（all）に対してトランジションが適用されますが、クリック後は「border-radius」のみがアニメーション対象となり、角丸への変化だけが滑らかに遷移します。
-
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