HTML DOM Style transitionプロパティの使い方を徹底解説！構文・設定値・サンプルコード付き
HTML DOM Style transitionプロパティとは
HTML DOMのStyleオブジェクトが持つtransitionプロパティは、HTMLドキュメント内の要素に適用されているCSSのtransitionプロパティの値を取得（読み取り）したり、変更（設定）したりするために使用します。
CSSのtransitionプロパティを利用すると、要素のスタイルが変化する際に、瞬時に切り替わるのではなく滑らかなアニメーションのような遷移効果を付けることができます。JavaScriptからこの値を動的に操作することで、ユーザーの操作に応じたインタラクティブな演出も簡単に実現できます。
構文（Syntax）
transitionプロパティの基本的な構文は次のとおりです。
1. transitionの値を取得する
object.transition
2. transitionの値を設定する
object.transition = "value"
設定できる値の一覧
| 値 | 説明 |
|---|---|
| initial | このプロパティの値をデフォルト値（初期値）に設定します。 |
| inherit | 親要素からこのプロパティの値を継承します。 |
| property duration timing-function delay | property … 遷移の対象となるCSSプロパティ名（例：width、heightなど） duration … 遷移効果が完了するまでの所要時間 timing-function … 遷移効果の速度変化を表すイージング曲線 delay … 遷移効果が開始されるまでの待ち時間 |
サンプルコード
以下は、HTML DOM Styleのtransitionプロパティを使った実践的な例です。「transitionを設定」ボタンをクリックすると、正方形の要素に対して"all 1s"（すべてのプロパティの変化を1秒かけて遷移させる）という設定が適用されます。
<!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%;
}
.show {
font-size: 1.2rem;
margin: 1rem 0;
}
</style>
<body>
<h1>DOM Style transitionプロパティのデモ</h1>
<div class='circle'></div>
<button onclick="set()" class="btn">transitionを設定</button>
<div class="show">正方形の上にマウスカーソルを合わせてください</div>
<script>
function set() {
document.querySelector('.circle').style.transition = "all 1s";
}
</script>
</body>
</html>
実行結果
「transitionを設定」ボタンをクリックした後、赤い正方形の上にマウスカーソルを合わせてみてください。
ボタンをクリックする前は、hoverしてもサイズや形状の変化が一瞬で切り替わるだけですが、transitionを設定した後は、正方形が拡大しながら円形へと滑らかにアニメーションしながら変化するのが確認できます。
ポイントまとめ
object.transitionで現在設定されているtransitionの値を取得できます。"all 1s"は「すべてのプロパティの変化を1秒かけて遷移させる」という意味です。- 特定のプロパティだけに適用したい場合は、例えば
"width 1s, border-radius 0.5s"のようにカンマ区切りで個別に指定することも可能です。 - duration（所要時間）には
s（秒）またはms（ミリ秒）の単位を指定します。
-
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