HTML DOMのStyle transitionDelayプロパティとは？使い方とサンプルコードを解説
HTML DOMのStyleオブジェクトが持つtransitionDelayプロパティは、要素に適用されたトランジション（遷移）効果が開始されるまでの遅延時間を、取得および設定できるプロパティです。JavaScriptから動的にアニメーションの開始タイミングを制御したい場合に活用できます。
構文
transitionDelayプロパティの基本的な構文は以下の通りです。
1. 値を取得する場合
object.transitionDelay
2. 値を設定する場合
object.transitionDelay = "value"
valueには以下のいずれかの値を指定できます。
| 番号 | 値と説明 |
|---|---|
| 1 | initial このプロパティの値をデフォルト値（初期値）にリセットします。 |
| 2 | inherit 親要素からこのプロパティの値を継承します。 |
| 3 | time トランジション効果の遅延時間を、秒単位なら「s」、ミリ秒単位なら「ms」で指定します。例：「2s」「500ms」など。 |
それでは、HTML DOMのStyle transitionDelayプロパティを使った具体的な例を見てみましょう。
サンプルコード
<!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 transitionDelay プロパティ デモ</h1>
<div class='circle'></div>
<button onclick="set()" class="btn">Set TransitionDelay</button>
<div class="show">次に、正方形の上にマウスを乗せてください</div>
<script>
function set() {
document.querySelector('.circle').style.transitionDelay = "2s";
}
</script>
</body>
</html>
実行結果
まず「Set TransitionDelay」ボタンをクリックし、その後に赤い正方形の上にマウスカーソルを乗せてください。ボタンをクリックすることで、transitionDelayプロパティに「2s（2秒）」が設定され、ホバー時の変形アニメーションが2秒遅れて開始されることが確認できます。
このように、transitionDelayプロパティを使えば、CSSだけでは制御しづらい「アニメーション開始までの待ち時間」を、JavaScriptから柔軟に操作することが可能になります。ユーザーの操作に応じて遅延時間を動的に変更したい場合などに、ぜひ活用してみてください。
-
HTML DOM スタイルの counterIncrement プロパティの使い方を徹底解説
HTML DOM の counterIncrement プロパティは、1つ以上の CSS カウンターの値を増加または減少させるために使用されます。通常は counterReset プロパティや content プロパティと組み合わせて使われます。 counterIncrement プロパティの構文 counterIncrement プロパティを設定する際の基本的な構文は以下の通りです。 object.style.counterIncrement = none|id|initial|inherit; プロパティ値の一覧 設定できる各プロパティ値の意味は次の通りです。 値説明 no
-
HTML DOM valueプロパティとは？属性値の取得方法とサンプルコードを解説
HTML DOMのvalueプロパティは、要素が持つ属性（attribute）の値に対応する文字列を返すプロパティです。JavaScriptからHTML要素の属性値を読み取りたい場合に活用できます。基本構文valueプロパティの基本的な書き方は以下の通りです。elementAttribute.value対象となる属性オブジェクトに対して.valueを指定することで、その属性が保持している値を文字列として取得できます。実装例ここでは、画像タグ（<img>）のsrc属性の値をボタンクリック時に取得して画面に表示するサンプルを紹介します。<!DOCTYPE html> <