animation delay CSS プロパティとは
トピック：アニメーションがいつ開始するかを定義する、ことができる秒の値は、アニメーションが適用されてから*秒後に開始することを示す。 または直ちにアニメーション周期の途中から始めることができる このプロパティの値は、s (秒)または ms(ミリ秒)で指定できる
プロパティ アニメーション遅延
実例 コード 1
サンプル コードを試す情報：このプロパティには負の値を使用できる アニメーションサイクルの途中でも実行されているように見える
プロパティ 定義と使用法
| デフォルト値・初期値 : | 0s |
|---|
| 適用対象 : | 全要素、::before / ::after 疑似要素 |
|---|
| 継承 : | 不可 |
|---|
| メディア : | visual |
|---|
| 計算値 : | 指定値 |
|---|
CSS Version | CSS3 |
|---|
| アニメーションの種類 : | 個別 |
|---|
| JavaScript 構文 | object.style.animationDelay="funWebref" |
|---|
| 正規順序 : | 形式文法で定義される一意のあいまいでない順序 |
|---|
| CSSの構文 | animation-delay: time |initial |inherit; |
|---|
プロパティ値
| 値 | 説明 |
|---|
time | オプション。アニメーションが開始されるまで待機する秒数またはミリ秒数を定義します。デフォルト値は0です。負の値も使用できる 負の値を使用すると、あたかも既にN秒/ミリ秒間再生されているかのようにアニメーションが開始される |
initial | このプロパティをデフォルト値に設定する |
inherit | 親要素からこのプロパティを継承する |
サポートするデスクトップ ブラウザ対応・互換性
| Property | Desktop 互換性 |
|---|
| animation delay | Chrome | Edge | Firefox | Internet Explorer | Opera | Safari |
|---|
| 基本 サポート | フルサポート◯43 | フルサポート◯12 | フルサポート◯16 | フルサポート◯10 | フルサポート◯30 | フルサポート◯9 |
|---|
サポートするモバイル ブラウザ対応・互換性
| Property | Mobile 互換性 |
|---|
| animation delay | Android | Chrome for Android
| Edge Mobile | Firefox for Android
| Opera for Android
| iOS Safari | Samsung Internet |
|---|
| 基本 サポート | フルサポート◯43 | 不明 | フルサポート◯あり | フルサポート◯16 | フルサポート◯30 | フルサポート◯あり | 不明 |
|---|
CSS animation-delay | CSS プロパティ 値| 意味 使い方 実例 – WebRef