CSSでのトランジションのプロパティと実装方法

この記事の内容は CSS での遷移のプロパティと実装方法についてです。必要な方は参考にしていただければ幸いです。

注: IE9 以前の IE バージョンは移行をサポートしていません。 Safari トラフィック デバイスを書き込むには、-webkit- などのプレフィックスを追加する必要があります。

1. トランジションとは、マウスが要素上に移動すると、あるスタイルから別のスタイルに変更できることを意味します。

2. 実装方法:

1. スタイル

.panel:target{
	margin-top: 0%;
	background-color: #ffcb00;
}

を指定します。2. 効果の継続時間を指定します (時間はデフォルトで 0 に設定され、指定されていない場合は効果がありません)。

3. 構文: トランジション: プロパティの期間タイミング関数遅延;

各プロパティの書き込みメソッドを項目ごとに分析します:

1. Transition-property (CSS 属性を指定)

:none (トランジション効果を取得する属性はありません) ); all (デフォルトでは、すべてのプロパティがトランジション効果を取得します); property (トランジション効果の適用を定義する CSS プロパティ名のリスト); :time (トランジション効果の完了にかかる時間を指定します。デフォルトは 0);

3. トランジション タイミング関数 (切り替え効果の速度を指定します); (同じ速度で開始および終了するトランジション エフェクトを指定します);ease ( デフォルト、低速で開始し、その後高速になり、その後低速で終了するトランジション エフェクトを指定します)。低速で開始するエフェクト);ease-out (低速で開始および終了するトランジション エフェクトを指定します); 、n、n、n) (3 次ベジェ関数で独自の値を定義します。使用可能な値は 0 ～ 1 のみです)

4. 遷移遅延 (切り替え効果が開始されるタイミングを指定します)

: time (切り替え効果が開始するまで待機する秒数またはミリ秒数を指定します。デフォルト値は 0) 関連する推奨事項:

css3 の background-orgin の使用方法 (コード付き)

css の使い方opacity 属性を使用して背景画像 (コード) に透明度を追加します

以上がCSSでのトランジションのプロパティと実装方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。