CSS3 transition-property プロパティ

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

<div> 要素の上にマウスをのせると、スムーズなトランジション効果で幅を変更します:

div {
    -webkit-transition-property: width; /* Safari */
    transition-property: width;
}

div:hover {
    width: 300px;
}
Try it Yourself ❯

他の "Try it Yourself" 例が下にあります。


定義と用法

transition-property プロパティは、トランジション効果を適用する CSS プロパティの名前を指定します (指定した CSS プロパティが変化した時に、トランジション効果が開始します)。

チップ: 典型的なトランジション効果の発生は、ユーザが要素上にマウスカーソルをのせたときです。

注: 常に transition-duration プロパティを指定します。指定しない場合は、トランジションに掛る時間が 0 になり、 トランジション効果が無くなります。

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

ブラウザ・サポート

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

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

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

CSS 構文

transition-property: none|all|プロパティ|initial|inherit;

プロパティの値

effect is for
説明
none どのプロパティもトランジション効果を取得しません
all デフォルト値。全てのプロパティがトランジション効果を取得します
プロパティ トランジション効果を適用する CSS プロパティ名をカンマ区切りのリストで定義します
initial プロパティにデフォルト値を設定します。initial を参照
inherit このプロパティは親要素を継承します。inherit を参照

Examples

その他の例

<div> 要素上にマウスをのせたると、トランジション効果でスムーズに幅と高さが変ります:

div {
    -webkit-transition-property: width, height; /* Safari */
    transition-property: width, height;
}

div:hover {
    width: 300px;
    height: 300px;
}
Try it Yourself ❯

関連ページ

CSS チュートリアル: CSS3 Transitions

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


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