transition-delay

これは実験段階の機能です。
この機能は複数のブラウザで開発中の状態にあります。互換性テーブルをチェックしてください。また、実験段階の機能の構文と挙動は、仕様変更に伴い各ブラウザの将来のバージョンで変更になる可能性があることに注意してください。

概要

transition-delay CSS プロパティでは、トランジションを行うプロパティにトランジションの要求が出されてから、実際にトランジション効果が始まるまでの時間を指定します。

0s または 0ms は、トランジションを行うプロパティの値が変更されたときに、アニメーションを即座に始めることを示します。正の値を与えると指定された時間分、トランジションの開始を遅らせます。負の値を与えるとトランジションは即座に始まりますが、アニメーションが途中から始まるように見えます。

このプロパティには複数の遅延時間を指定することができます。それぞれの遅延時間は、マスターリストを務める transition-property プロパティの指定値で対応するプロパティに適用されます。指定した遅延時間の数がマスターリストで指定したプロパティの数より少ない場合は、不足している値は初期値 (0s) になります。また遅延時間の数が多い場合は、リストを適切な長さに切り詰めます。どちらの場合も、CSS の宣言として妥当です。

初期値0s
適用対象全要素、::before / ::after 疑似要素
継承不可
メディアinteractive
計算値指定値
アニメーションの可否不可
正規順序形式文法で定義される一意のあいまいでない順序

構文

transition-delay: time[, time]*
time
プロパティの値の変更からアニメーション効果が始まるまでの遅延時間を表す <time> 形式の値。

CSS transitions の記事に、CSS transitions の例がいくつかあります。

仕様書

ブラウザ実装状況

機能 Chrome Firefox (Gecko) Internet Explorer Opera Safari
基本サポート 1.0 -webkit 4.0 (2.0) -moz
16.0 (16.0)[1]
10.0 11.6 -o
12.10
3.0 -webkit
機能 Android Firefox Mobile (Gecko) IE Mobile Opera Mobile Safari Mobile
基本サポート 2.1 -webkit 4.0 (2.0) -moz
16.0 (16.0)[1]
? 10.0 -o
12.10[2]
3.2 -webkit

[1] 接頭辞なしのサポートに加えて、Gecko 44.0 (Firefox 44.0 / Thunderbird 44.0 / SeaMonkey 2.41) では接頭辞 -webkit ありのプロパティを互換性のためにサポートしています。layout.css.prefixes.webkit の設定によって切り替えが可能で、規定値は false です。Gecko 49.0 (Firefox 49.0 / Thunderbird 49.0 / SeaMonkey 2.46) からは、この設定項目の規定値は true です。

[2] Opera 12.50 についてのブログ記事 を参照してください。

参考情報

ドキュメントのタグと貢献者

 このページの貢献者: hamasaki, mrstork, teoli, ethertank, yyss
 最終更新者: hamasaki,