transition-delay
CSS の transition-delay プロパティは、値が変更されたときにプロパティのトランジション効果が始まるまでの待ち時間を指定します。
この対話型サンプルのソースファイルは GitHub リポジトリに格納されています。対話型サンプルプロジェクトに協力したい場合は、 https://github.com/mdn/interactive-examples をクローンしてプルリクエストを送信してください。
待ち時間はゼロ、正の数、負の数で指定します。
0s(又は0ms) の値は直ちにトランジション効果が始まります。- 正の数の場合は、指定された時間の長さの分だけトランジション効果が始まるのが遅れます。
- 負の数の場合は、直ちにトランジション効果が、効果の途中から始まります。言い換えれば、効果は指定された時間の長さの分だけ既に実行されていたかのように動きます。
複数の待ち時間を指定することができ、複数のプロパティのトランジションを行うときに有用です。それぞれの待ち時間は、マスターリストである transition-property プロパティによって指定された対応するプロパティに適用されます。マスターリストよりも指定された待ち時間が少ない場合は、充足するまで待ち時間のリストが繰り返して使用されます。また待ち時間の数が多い場合は、リストが適切な長さに切り詰められます。どちらの場合も、 CSS の宣言として妥当です。
構文
/* <time> 値 */
transition-delay: 3s;
transition-delay: 2s, 4ms;
/* グローバル値 */
transition-delay: inherit;
transition-delay: initial;
transition-delay: unset;
値
<time>- プロパティの値の変更からアニメーション効果が始まるまでの待ち時間を表す
<time>形式の値。
形式文法
例
transition-delay: 0.5s
transition-delay: 1s
transition-delay: 2s
transition-delay: 4s
仕様書
| 仕様書 | 状態 | 備考 |
|---|---|---|
| CSS Transitions transition-delay の定義 |
草案 | 初回定義 |
| 初期値 | 0s |
|---|---|
| 適用対象 | すべての要素、::before / ::after 擬似要素 |
| 継承 | なし |
| 計算値 | 指定通り |
| アニメーションの種類 | 離散値 |
ブラウザーの対応
BCD tables only load in the browser