CSS の transition-duration
プロパティは、トランジションによるアニメーションが完了するまでの所要時間を秒数またはミリ秒数で指定します。既定値は 0s
であり、これはアニメーションを実行しないことを示します。
このデモのソースファイルは GitHub リポジトリに格納されています。デモプロジェクトに協力したい場合は、 https://github.com/mdn/interactive-examples をクローンしてプルリクエストを送信してください。
このプロパティには複数の所要時間を指定することができます。それぞれの時間は、マスターリストを務める transition-property
プロパティの指定値で対応するプロパティに適用されます。指定した所要時間の数がマスターリストで指定したプロパティの数より少ない場合は、不足している値は初期値 (0s
) になります。また所要時間の数が多い場合は、リストを適切な長さに切り詰めます。どちらの場合も、CSS の宣言として妥当です。
構文
/* <time> values */ transition-duration: 6s; transition-duration: 120ms; transition-duration: 1s, 15s; transition-duration: 10s, 30s, 230ms; /* Global values */ transition-duration: inherit; transition-duration: initial; transition-duration: unset;
値
- time
- プロパティの古い値から新しい値へ遷移するのにかかる時間を表す
<time>
形式の値です。0s
の時間は、遷移が起こらないこと、すなわち、2 つの状態間の切り替えが瞬間的であることを示します。負の値を指定すると、宣言は無効になります。
形式文法
<time>#
例
transition-duration: 0.5s
transition-duration: 1s
transition-duration: 2s
transition-duration: 4s
仕様書
仕様書 | 状態 | 備考 |
---|---|---|
CSS Transitions transition-duration の定義 |
草案 | 初回定義 |
初期値 | 0s |
---|---|
適用対象 | すべての要素、::before / ::after 疑似要素 |
継承 | なし |
メディア | interactive |
計算値 | 指定値 |
アニメーションの種類 | 個別 |
正規順序 | 形式文法で定義される一意のあいまいでない順序 |
ブラウザーの対応
このページの互換性一覧表は構造化データから生成されています。データに協力していただけるのであれば、 https://github.com/mdn/browser-compat-data をチェックアウトしてプルリクエストを送信してください。
Update compatibility data on GitHub
デスクトップ | モバイル | |||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|
transition-duration | Chrome
完全対応
26
| Edge
完全対応
12
| Firefox
完全対応
16
| IE
完全対応
10
| Opera
完全対応
12.1
| Safari
完全対応
9
| WebView Android
完全対応
≤37
| Chrome Android
完全対応
26
| Firefox Android
完全対応
16
| Opera Android
完全対応
12.1
| Safari iOS
完全対応
9
| Samsung Internet Android
完全対応
あり
|
凡例
- 完全対応
- 完全対応
- ユーザーが明示的にこの機能を有効にしなければなりません。
- ユーザーが明示的にこの機能を有効にしなければなりません。
- 使用するには、ベンダー接頭辞または異なる名前が必要です。
- 使用するには、ベンダー接頭辞または異なる名前が必要です。