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