CSS3遷移の詳細解説 - Escape Tornado

0.環境準備

(1)これらの属性を使用するには、ブラウザのサポートが必要です。私が使用している chrome49 では、プレフィックスが不要になりました。

-o-オペラ

-webkit- Safari、Chrome

-moz- Firefox

-ms-IE

(2)css

ぷ

{

Height:15px;

/*height属性と同様、値を明確に指定する必要があります*/

}

p:hover

/*初期p:hover*/

{

高さ:100px;

}

(3)htmlファイル本体部分

1. すぐに使える

初期のp:hoverに以下の属性を追加します

トランジション: 背景 2s リニア 1s、高さ 1s リニア 1s;

2.詳しい説明

(1)別途指定し、属性を詳しく説明します

初期のp:hoverに以下の属性を追加します

transition-property:height,background-color;

transition-duration:1s,2s;

transition-timing-function:linear;

移行遅延:1000ms,1s;

Transition-propertyは変更が必要なプロパティを指定します

ルールがわかりにくいため、すべてを書くことはお勧めしません

transition-duration height は実行から終了まで 1 秒かかり、background-color は実行から終了まで 2 秒かかります。高さの変更が終了した後、背景色の変更が終了した後もまだ 1 秒が残っています。

値を 1 つだけ記述する場合は、すべての属性がこの値を適用します。また、transition-duration 値の数は、transition-duration 値の数と同じにしてください。

transition-timing-function: 線形; 変更ルールはここで確認してください

値を 1 つだけ記述した場合、この値はすべてのプロパティに適用されます。また、transition-timing-function の値の数は、transition-property の値の数と同じにしてください。

移行遅延: 1000 ミリ秒、1 秒; 高さは 1 秒後に変化し始めます。ここでは背景色と高さが同時に変化し始めます

値を 1 つだけ記述した場合、この値はすべてのプロパティに適用されます。また、transition-delay の値の数は、transition-property の値の数と同じにしてください。

これらの属性は 1 回のみ表示できます。そうでないと、後の属性が前の属性を上書きします

(2) 総合利用

最初の p:hover に次の属性を追加します

トランジション: 背景 2 秒 リニア 1 秒、高さ 1 秒 リニア 1 秒;

オプションのパラメータ。完全に記述してください

これらの属性は 1 回のみ表示できます。そうでないと、後の属性が前の属性を上書きします

*別々に書かれたトランジションやその他のトランジションも上書きされ、後のトランジションが前のトランジションを覆います