複数のプロパティに対して CSS トランジション短縮表現を効率的に使用するにはどうすればよいですか?

複数のプロパティの CSS トランジション短縮表現

CSS では、トランジション短縮表現を使用して、複数のトランジション プロパティを 1 つの宣言に結合できます。ただし、複数のプロパティで使用する場合は、正しい構文に従うことが重要です。

Syntax

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

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

個々のトランジションの結合

個々のトランジションを結合するには、次のコマンドを使用します。構文:

-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 .5s;
}

この例では、身長と不透明度は 0.5 秒かけて遷移しますが、不透明度の遷移はさらに 0.5 秒遅れます。

互換性

遷移の省略表現は、最新のブラウザで広くサポートされています。互換性の詳細については、http://caniuse.com/css-transitions を参照してください。

結論

CSS トランジションの短縮表現により、複数のトランジションの宣言が簡素化され、CSS のアニメーションを制御できるようになります。プロパティをより効率的に。正しい構文に従い、ブラウザ間の互換性のためにプレフィックスを使用してください。

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