transition-delay
Baseline Widely available
This feature is well established and works across many devices and browser versions. It’s been available across browsers since 2015年9月.
CSS の transition-delay プロパティは、値が変更されたときにプロパティのトランジション効果が始まるまでの待ち時間を指定します。
試してみましょう
transition-delay: 250ms; transition-property: margin-right; transition-delay: 1s; transition-property: background-color; transition-delay: 1s; transition-property: margin-right, color; transition-delay: 1s, 250ms; transition-property: margin-right, color; <section id="default-example"> <div id="example-element">Hover to see<br />the transition.</div> </section> #example-element { background-color: #e4f0f5; color: #000; padding: 1rem; border-radius: 0.5rem; font: 1em monospace; width: 100%; transition: margin-right 2s; } #default-example:hover > #example-element { background-color: #909; color: #fff; margin-right: 40%; } 待ち時間はゼロ、正の数、負の数で指定します。
0s(または0ms) の値は直ちにトランジション効果が始まります。- 正の数の場合は、指定された時間の長さの分だけトランジション効果が始まるのが遅れます。
- 負の数の場合は、直ちにトランジション効果が、効果の途中から始まります。言い換えれば、効果は指定された時間の長さの分だけ既に実行されていたかのように動きます。
複数の待ち時間を指定することができ、複数のプロパティのトランジションを行うときに有用です。それぞれの待ち時間は、マスターリストである transition-property プロパティによって指定された対応するプロパティに適用されます。マスターリストよりも指定された待ち時間が少ない場合は、充足するまで待ち時間のリストが繰り返して使用されます。また待ち時間の数が多い場合は、リストが適切な長さに切り詰められます。どちらの場合も、 CSS の宣言として妥当です。
構文
css
/* <time> 値 */ transition-delay: 3s; transition-delay: 2s, 4ms; /* グローバル値 */ transition-delay: inherit; transition-delay: initial; transition-delay: revert; transition-delay: revert-layer; transition-delay: unset; 値
<time>-
プロパティの値が変化してからトランジション効果が始まるまでの待ち時間を記述します。
公式定義
形式文法
transition-delay =
<time>#
例
様々な待ち時間を示す例
HTML
html
<div class="box delay-1">0.5 seconds</div> <div class="box delay-2">2 seconds</div> <div class="box delay-3">4 seconds</div> <button id="change">Change</button> CSS
css
.box { margin: 20px; padding: 10px; display: inline-block; width: 100px; height: 100px; background-color: red; font-size: 18px; transition-property: background-color, font-size, transform, color; transition-timing-function: ease-in-out; transition-duration: 3s; } .transformed-state { transform: rotate(270deg); background-color: blue; color: yellow; font-size: 12px; transition-property: background-color, font-size, transform, color; transition-timing-function: ease-in-out; transition-duration: 3s; } .delay-1 { transition-delay: 0.5s; } .delay-2 { transition-delay: 2s; } .delay-3 { transition-delay: 4s; } JavaScript
js
function change() { const elements = document.querySelectorAll("div.box"); for (const element of elements) { element.classList.toggle("transformed-state"); } } const changeButton = document.querySelector("#change"); changeButton.addEventListener("click", change); 結果
仕様書
| Specification |
|---|
| CSS Transitions # transition-delay-property |