CSS3 transition-duration プロパティ

❮ 前章へ 完全な CSS リファレンス 次へ ❯

トランジション効果は 5 秒後に終了します:

div {
    -webkit-transition-duration: 5s; /* Safari */
    transition-duration: 5s;
}
Try it Yourself ❯

定義と用法

transition-duration プロパティは、トランジション効果が完了するまでの秒数(s)またはミリ秒(ms)を指定します。

デフォルト値: 0s
継承: 継承する
アニメーション可否: 不可。animatable を参照
バージョン: CSS3
JavaScript 構文: object.style.transitionDuration="1s" Try it

ブラウザ・サポート

表中の数字は、完全にプロパティをサポートした最初のブラウザのバージョンです。

-webkit-、-moz-、-o- の後に続く数字は、接頭辞付きで動作した最初のバージョンです。

プロパティ
transition-duration 26.0
4.0 -webkit-
10.0 16.0
4.0 -moz-
6.1
3.1 -webkit-
12.1
10.5 -o-

CSS 構文

transition-duration: time|initial|inherit;

プロパティの値

説明
time トランジション効果が完了するまでにかかる秒数またはミリ秒数を指定します。 デフォルト値は 0 で、効果がないことを表します
initial プロパティにデフォルト値を設定します。initial を参照
inherit このプロパティは親要素を継承します。inherit を参照

関連ページ

CSS チュートリアル: CSS3 Transitions

HTML DOM リファレンス:transitionDuration プロパティ


❮ 前章へ 完全な CSS リファレンス 次へ ❯