複数のプロパティに対して CSS Transition 短縮表現を正しく使用するにはどうすればよいですか?

複数のプロパティで CSS トランジション短縮表現を使用する方法

CSS トランジション短縮表現を使用すると、単一の宣言で複数のトランジション プロパティを指定できます。これは、記述する必要があるコードの量を減らすのに役立ちます。ただし、正しい構文を見つけるのは難しい場合があります。

間違った省略構文

提供されたコード スニペットでは、CSS トランジションの省略表現が誤って使用されています:

.element {
  -webkit-transition: height .5s, opacity .5s .5s;
     -moz-transition: height .5s, opacity .5s .5s;
      -ms-transition: height .5s, opacity .5s .5s;
          transition: height .5s, opacity .5s .5s;
}

問題は不透明度トランジションの 3 番目のパラメータにあります。期間の後に遅延を指定することはできません。

正しい短縮構文

複数のプロパティを含む CSS トランジション短縮の正しい構文は次のとおりです:

transition: <property> || <duration> || <timing-function> || <delay> [, ...];</delay></timing-function></duration></property>

後者が遅延の場合、継続時間は遅延の前に来る必要があることに注意してください。

例

省略表現を使用して要素の高さと不透明度の両方を遷移するには、次のように記述します。

.element {
  transition: height 0.5s, opacity 0.5s;
}

または、要素のすべての CSS プロパティを一度に移行できます:

.element {
  transition: all 0.5s;
}

CSS トランジションの短縮形。CSS コードを簡素化し、トランジションの定義にかかる時間を短縮できます。

以上が複数のプロパティに対して CSS Transition 短縮表現を正しく使用するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。