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

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

CSS では、トランジションにより、指定されたプロパティの値を時間の経過とともに徐々に変更することで、スムーズなアニメーションが可能になります。ただし、複数のトランジションが同じ要素に適用される場合、後続のトランジションが前のトランジションを上書きする可能性があります。

次の CSS コード スニペットを考えてみましょう。

.nav a {
    text-transform:uppercase;
    text-decoration:none;
    color:#d3d3d3;
    line-height:1.5 em;
    font-size:.8em;
    display:block;
    text-align:center;
    text-shadow: 0 -1.5em 0 rgba(255, 255, 255, 0.15);
    -webkit-transition: color .2s linear;
    -moz-transition: color .2s linear;
    -o-transition: color .2s linear;
    transition: color .2s linear;
    -webkit-transition: text-shadow .2s linear;
    -moz-transition: text-shadow .2s linear;
    -o-transition: text-shadow .2s linear;
    transition: text-shadow .2s linear;
}

.nav a:hover {
    color:#F7931E;
    text-shadow: 0 1.5em 0 rgba(247, 147, 30, 0.15);
}

このコードでは、両方の色がtext-shadow プロパティにはトランジション効果が定義されています。問題は、2 番目の遷移が最初の遷移を上書きすることです。その結果、テキスト シャドウ アニメーションは発生しますが、カラー アニメーションは発生しません。

この問題を解決し、両方のトランジションを同時に動作させるには、CSS トランジション プロパティを組み合わせて使用​​します。その方法は次のとおりです。

カンマ区切りの遷移プロパティ

遷移をサポートするすべてのブラウザでは、遷移プロパティをカンマで区切ることができます。複数のプロパティをカンマで区切ることで、両方のトランジションを同時にトリガーできます。

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

イージング関数を指定

デフォルトでは、トランジションはイージング タイミング関数を使用します。線形などの別のタイミング関数を使用したい場合は、それを明示的に指定する必要があります。

transition: color .2s linear, text-shadow .2s linear;

遷移プロパティの短縮形

同じタイミングとタイミング関数を使用する場合のより明確なアプローチ複数のプロパティの場合は、省略表現の代わりに、transition-* プロパティを使用します:

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

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