CSS 短縮表現を使用して複数のプロパティを同時に遷移するにはどうすればよいですか?-CSSチュートリアル-php.cn

CSS 短縮表現を使用して複数のプロパティを同時に遷移するにはどうすればよいですか?

Susan Sarandon

リリース： 2024-11-30 10:21:15

オリジナル

834 人が閲覧しました

How Can I Use CSS Shorthand to Transition Multiple Properties Simultaneously?

短縮表現を使用した複数の CSS プロパティの遷移

CSS では、transition プロパティは複数のプロパティを同時に遷移させる便利な短縮表現を提供します。これにより、コードが簡素化され、より簡潔になります。短縮表現を使用するには、次の構文に従います。

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

ログイン後にコピー

指定する場合、遅延時間は遅延の前に指定する必要があることに注意してください。

特定のプロパティへの短縮表現トランジションの適用:

-webkit-transition: height 0.3s ease-out, opacity 0.3s ease 0.5s;
-moz-transition: height 0.3s ease-out, opacity 0.3s ease 0.5s;
-o-transition: height 0.3s ease-out, opacity 0.3s ease 0.5s;
transition: height 0.3s ease-out, opacity 0.3s ease 0.5s;

ログイン後にコピー

すべてを移行中プロパティ:

次の短縮表現を使用してすべてのプロパティを遷移できます:

-webkit-transition: all 0.3s ease-out;
-moz-transition: all 0.3s ease-out;
-o-transition: all 0.3s ease-out;
transition: all 0.3s ease-out;

ログイン後にコピー

例:

次の例を考えてみましょう:

.element {
  transition: height 0.5s, opacity 0.5s 0.5s;
  height: 0;
  opacity: 0;
  overflow: 0;
}
.element.show {
  height: 200px;
  opacity: 1;
}

ログイン後にコピー

この例では、show クラスを追加すると要素の高さが変化します。

注: トランジションの互換性は優れており (グローバルで 94% 以上)、通常は安全に使用できます。互換性が気になる場合は、https://caniuse.com/css-transitions を参照してください。

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