単一の要素で複数の CSS トランジションを同時に機能させるにはどうすればよいですか?

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

指定された HTML スニペットでは、指定された CSS トランジションが相互に上書きされているように見え、ホバー時にアニメーション化するテキストシャドウ効果。カラーとテキストシャドウの両方のアニメーションを同時に有効にするには、調整が必要です。

解決策:

1.カンマ区切りのトランジション プロパティを使用する:

CSS のトランジション プロパティはカンマで区切ることができます。この手法を使用すると、個別に遷移する複数のプロパティを指定できます。コードを更新する方法は次のとおりです:

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

2.線形タイミング関数を明示的に指定:

線形タイミング関数はデフォルトですが、明確にするために明示的に指定することをお勧めします。次の行を追加して、両方の遷移が線形進行に従うようにします:

transition-timing-function: linear;

3. Transition-* プロパティを使用する (オプション):

複数のプロパティが関係する複雑な遷移の場合、多くの場合、短縮構文の代わりに専用のtransition-* プロパティを使用する方が簡単です。以下に例を示します:

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

結果:

これらの変更により、アンカー要素の上にマウスを移動すると、color プロパティと text-shadow プロパティの両方がスムーズに遷移します。 .navリスト。アニメーションは同時に独立して実行され、よりダイナミックな効果が可能になります。

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