CSS3のTransitionプロパティの詳細説明とexamples_CSS/HTMLの共有

1.transition-property の構文
[css]
transition-property: all (すべての属性が変更されます) || [attr] (移動するスタイルを指定します)| | なし (属性変更なし)

2.transition-propertyの属性値
(1)none：トランジションの実行を即時に停止します
(2)all：要素のいずれかの属性値が変化したときにトランジション効果を実行します
(3)attr : 移動するスタイルを指定

1. Transition プロパティ — 移動するスタイルを指定します

1.transition-propertyの構文
[css]
transition-property: all (すべての属性が変更される) || [attr] (移動するスタイルを指定する) || none (属性は変更されない) )

2.transition-propertyの属性値
(1)none：トランジションの実行を即時に停止します
(2)all：要素のいずれかの属性値が変化したときにトランジション効果を実行します
(3)attr : 移動するスタイルを指定

2. 遷移期間
遷移期間は、指定された要素の変換プロセスの期間 (秒) です。 transition-duration は、:before と :after

疑似要素。デフォルト値は 0 で、変換が即時に行われることを意味します。

3. 遷移遅延 - 遅延時間
遷移遅延は、アニメーションの実行を開始する時間、つまり、アニメーションを変更してから実行を開始するまでにかかる時間を指定するために使用されます。要素の属性値。トランジション効果、単位は s (秒)

の使用法は、transition-duration と非常に似ており、:before および :after 疑似要素を含むすべての要素に適用することもできます。デフォルトのサイズは「0」です。これは、変換がすぐに実行されることを意味します。

遅延はありません。

IV. 遷移タイミング関数 - モーションの形式を指定します
遷移タイミング関数: イーズ (徐々に遅くなります) | リニア (一定速度) | イーズイン (加速します) ) |ease-out (減速) |ease-in-out (最初に加速してから減少します

速度) | cubic-bezier (この値により時間曲線をカスタマイズできます) (number,number,number,number>)

5. トランジションの包括的な記述方法
[css]
要素セレクター {トランジション: モーション スタイル、デュレーション、モーション フォーム、遅延時間;}

6. 包括的で互換性のある移行の記述方法

1. Mozilla カーネル
[css]
要素セレクター {-moz-transition: モーション スタイル、持続時間、モーション フォーム、遅延時間;}

2. Webkit カーネル
[css]
要素セレクター {-webkit-transition: モーション スタイル、持続時間、モーション フォーム、遅延時間;}

3. Opera カーネル
[css]
要素セレクター {-o-transition: モーション スタイル、持続時間、モーション フォーム、遅延時間;}

4. W3C 標準
[css]
要素セレクター {トランジション: モーション スタイル、持続時間、モーション フォーム、遅延時間;}

効果の例: