複数の CSS トランジションを競合せずに要素に適用するにはどうすればよいですか?

要素上の複数の CSS トランジション

要素に複数の CSS トランジションを適用すると、1 つのプロパティがアニメーションを上書きするという競合が発生する可能性があります。

次の CSS を検討してください。スニペット:

.nav a {
  ...
  transition: color .2s linear, text-shadow .2s linear;
}

この例では、テキストシャドウ アニメーションがカラー アニメーションを上書きします。この問題を解決し、同時アニメーションを有効にするには、トランジション プロパティをカンマで区切ります。

.nav a {
  ...
  transition: color .2s linear, text-shadow .2s linear;
}

または、transition-property、transition-duration、transition-timing-function とともに短縮形のトランジション プロパティを使用できます。アニメーション パラメータを指定するには:

.nav a {
  ...
  transition-property: color, text-shadow;
  transition-duration: .2s;
  transition-timing-function: linear;
}

このアプローチにより柔軟性が高まり、アニメーション設定を個別に制御できるようになります。プロパティ。

以上が複数の CSS トランジションを競合せずに要素に適用するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。