transition-delay CSS プロパティとは
トピック：トランジションエフェクトが開始されるときに、プロパティを指定することができる transition-delay値は秒（s）またはミリ秒（ms）で定義されてる トランジション効果が始まるまでの待ち時間を指定する 待ち時間はゼロ、正の数、負の数で指定
プロパティ transition-delay
実例 コード 1
サンプル コードを試す div {
transition-delay: 2s;
}
CSSコード：例
transition-delay:3s;
transition-delay:2s, 4ms;
transition-delay: inherit;
transition-delay: initial;
transition-delay: unset;
情報：<time>プロパティの値の変更からアニメーション効果が始まるまでの待ち時間を表す <time> 形式の値。
プロパティ
| デフォルト値・初期値 : | 0s |
|---|
| 適用対象 : | 全要素、::before / ::after 疑似要素 |
|---|
| 継承 : | 不可 |
|---|
| メディア : | interactive |
|---|
| 計算値 : | 指定値 |
|---|
CSS Version | CSS3 |
|---|
| アニメーションの種類 : | 個別 |
|---|
| JavaScript 構文 | object.style.transitionDelay="2s" |
|---|
| 正規順序 : | 形式文法で定義される一意のあいまいでない順序 |
|---|
| CSSの構文 | transition-delay: time |initial |inherit;, （transition-delay: 時間｜初期｜継承） |
|---|
サポートするデスクトップ ブラウザ対応・互換性
| Property | Desktop 互換性 |
|---|
| transition-delay | Chrome | Edge | Firefox | Internet Explorer | Opera | Safari |
|---|
| 基本 サポート | フルサポート◯26 | フルサポート◯12 | フルサポート◯16 | フルサポート◯10 | フルサポート◯12.1 | フルサポート◯あり |
|---|
サポートするモバイル ブラウザ対応・互換性
| Property | Mobile 互換性 |
|---|
| transition-delay | Android | Chrome for Android
| Edge Mobile | Firefox for Android
| Opera for Android
| iOS Safari | Samsung Internet |
|---|
| 基本 サポート | フルサポート◯あり | フルサポート◯26 | フルサポート◯12 | フルサポート◯16 | フルサポート◯12.1 | フルサポート◯あり | フルサポート◯あり |
|---|
CSS transition-delay アニメーション | CSS プロパティ 値| 意味 使い方 実例 – WebRef