CSS3はトランジション効果を実現するためにtransitionプロパティを使用する。

物件の詳細な説明

transition 属性の目的は、一部の CSS プロパティ (背景など) をスムーズな遷移効果で表示することです。これは、次の 4 つの属性から構成される複合属性です。

• transition-property: 背景など、トランジションを適用する CSS プロパティを設定します。
• transition-duration: トランジション効果の継続時間を設定します。デフォルトは0です。
• transition-timing-function: トランジション効果のタイミング カーブを設定します。デフォルトは「ease」です。
• transition-delay: トランジション効果がいつ始まるかを指定します。デフォルトは0です。

例：

 ボタン{
    トランジション: 背景 1 秒;
    -webkit-transition: background 1s; /* Safari */
 }

遷移プロパティを定義する場合、 transition-property と transition-duration は必須であり、他の 2 つはオプションです。

transition-property と transition-duration

transition-property は、トランジション効果を適用するための CSS プロパティを指定するために使用されます。これらのプロパティには次のものが含まれます (完全ではない場合があります)。

• 幅
• 身長
• 色
• 背景（色、画像、位置）
• 変換（次の投稿で）
• 境界線（色、幅）
• 位置（上、下、左、右）
• テキスト（サイズ、太さ、影、単語間隔）
• マージン
• パディング
• 不透明度
• 可視性
• Zインデックス
• 全て

transition-duration プロパティは、指定されたプロパティの遷移効果の継続時間を設定するために使用され、秒 (s) またはミリ秒 (ms) で指定できます。

遷移遅延と遷移タイミング関数

transition-delay は、トランジション効果の開始時間を設定するために使用されます。デフォルト値は 0 で、秒 (s) またはミリ秒 (ms) を指定できます。 transition-delay が負の数の場合、遷移効果が早く開始されることを意味します。

transition-timing-function は、次のようなトランジション効果を設定するために使用されます。

• 最初はゆっくり、途中は速く、最後はゆっくり
• イーズイン - ゆっくり入って、早く出る
• イーズアウト - イーズアウト効果、速く入り、ゆっくり出る。
• イージーインアウト - ゆっくりと始まり、ゆっくりと終わる
• cubic-bezier(n,n,n,n) - cubic-bezier関数で独自の値を定義します。可能な値は0〜1です。

例：

 ボタン{
   トランジション: 背景 1 秒、イーズイン アウト 2 秒;
   -webkit-transition: background 1s easy-in-out 2s; /* Safari */
 }

複数の属性

複数のプロパティの場合、各プロパティの効果はコンマで区切られます。

  ボタン{
     遷移: 背景 1 秒、イーズイン アウト 2 秒、幅 2 秒、線形。
     -webkit-transition: background 1s easy-in-out 2s, width 2s linear; /* Safari */
   }

互換性

Internet Explorer 10、Firefox、Opera、Chrome は transition プロパティをサポートしています。

Safari は代替の -webkit-transition プロパティをサポートしています。

Internet Explorer 9 以前のバージョンでは、 transition プロパティはサポートされていません。

トリガー

トランジション効果には事前に定義されたプロパティが必要であり、トランジション効果は :hover、:focus、:active などのトリガーを通じて適用されることに注意してください。

要約する

以上が、CSS3 の transition 属性を使用してトランジション効果を実現する方法についてご紹介しました。お役に立てれば幸いです。ご質問がある場合は、メッセージを残していただければ、すぐに返信いたします。また、123WORDPRESS.COM ウェブサイトをサポートしてくださっている皆様にも感謝申し上げます。