CSS で複数のプロパティを使用したトランジションの省略表現?

CSS を使用して HTML 要素にトランジションを追加できます。このチュートリアルを始める前に、まずトランジションとは何かを理解しましょう。基本的に、遷移とは、要素がある状態から別の状態に変化することです。たとえば、ユーザーが要素の上にマウスを移動すると、要素の寸法が変更されます。

CSS では、2 つの方法で要素にトランジションを追加できます。 1 つ目は、「transition-property」、「transition-duration」、「transition-timing-function」、「transition-lay」の 4 つのプロパティを同時に使用する方法です。 2 つ目は、「transition」CSS プロパティを使用することです。

CSS の「transition」プロパティは、次の CSS プロパティの短縮形です。

• Transition-property - トランジション効果を適用する必要がある CSS プロパティを指定します。すべてのプロパティに変換を適用する必要がある場合は、値として「all」を使用できます。

• Transition-duration - トランジション効果の合計持続時間 (秒単位)。

• Transition-timing-function - 遷移をどのように進めるかを決定します。遷移タイミング関数の例としては、「liner」、「ease-in」、「ease-out」、「ease-in-out」などがあります。

• トランジション遅延 - これは、トランジション効果が開始されてからの時間です。

＃＃＃文法＃＃＃

ユーザーは、次の構文に従って、複数の CSS プロパティでトランジションの短縮表現を使用できます。

リーリー

上記の構文では、最初の値は変換属性、2 番目の値は変換期間、3 番目の値はタイミング関数、最後の値は変換遅延です。

例 1

以下の例では、200 x 200 の寸法を持つ div 要素があり、div 要素の高さで 2 秒続くトランジション エフェクトを追加します。ここでは、変換遅延は 0.5 秒、タイミング機能は「イーズインアウト」です。

ユーザーはマウスを div 要素の上に置くと、トランジション効果を観察できます。 div 要素の高さがすぐにではなく滑らかに増加することがわかります。

リーリー

例 2

以下の例では、div 要素の初期の margin-left は 2px です。ユーザーが div 要素の上にマウスを移動すると、margin-left が 100px に増加します。 div 要素の margin-left CSS プロパティに、0.5 秒遅れて 2 秒間持続するトランジション効果を追加しました。

出力で div 要素の上にマウスを置くと、2 秒以内に右に 100 ピクセル移動します。

リーリー

例 3

以下の例では、複数の CSS プロパティにトランジション効果を追加します。ここでは、「margin-left」、「height」、「width」、「background-color」、「color」、「font-size」の CSS プロパティに 2 秒間のトランジション効果を追加しました。

出力では、すべての CSS プロパティの遷移がスムーズであることがわかります。ただし、「transition-property」の値として「all」を使用して、すべてのプロパティにトランジションを追加できます。

リーリー

ユーザーは、トランジションに関連する複数の CSS プロパティの短縮形である「トランジション」CSS プロパティの使い方を学びました。ここでは、上記の 3 つの例で CSS プロパティ「transition」を使用する方法を学びました。前の例では、複数の CSS プロパティにトランジション効果を追加しました。

以上がCSS で複数のプロパティを使用したトランジションの省略表現?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。