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

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

CSS トランジション プロパティを使用すると、時間の経過とともに要素スタイルのスムーズなアニメーションが可能になります。ただし、複数のトランジションが同じ要素に適用される場合、それらが互いに上書きされ、意図しないアニメーション動作が発生する可能性があります。

解決策:

複数の CSS トランジションをオンにするには要素の場合は、transition プロパティにカンマ区切りのリストを使用します。これにより、指定されたプロパティを同時に遷移する必要があることがブラウザに通知されます。例:

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

デフォルトでは、遷移タイミング関数は「ease」で、滑らかな加速および減速曲線を提供します。必要に応じて、transition-timing-function プロパティを使用してタイミング関数を明示的に指定できます。たとえば、線形遷移を使用するには:

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

構文を簡潔にするために、遷移プロパティを個別のプロパティに分離することもできます:

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

このアプローチでは、transition-property プロパティを使用します。アニメーション化するプロパティを指定するには、transition-duration を使用し、アニメーションの継続時間を設定するには、transition-timing-function を使用してアニメーション カーブを定義します。

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