複数の CSS トランジション効果を実装する方法

Question

これは非常に単純な質問ですが、CSS トランジション プロパティに関する適切なドキュメントが見つかりません。 CSS スニペットは次のとおりです:

.nav a
{
    テキスト変換:大文字;
    テキスト装飾:なし;
    色:#d3d3d3;
    行の高さ:1.5 em;
    フォントサイズ:.8em;
    表示ブロック;
    テキスト整列:中央;
    テキストシャドウ: 0 -1.5em 0 rgba(255, 255, 255, 0.15);
    -webkit-transition: カラー .2s リニア;
    -moz-transition: カラー .2s リニア;
    -o-transition: カラー .2s リニア;
    トランジション: カラー 0.2 秒リニア。
    -webkit-transition: text-shadow .2s リニア;
    -moz-transition: text-shadow .2s リニア;
    -o-transition: text-shadow .2s リニア;
    トランジション: text-shadow .2s リニア。
}

.nav a:ホバー
{
    色:#F7931E;
    テキストシャドウ: 0 1.5em 0 rgba(247, 147, 30, 0.15);
}

ご覧のとおり、トランジション プロパティは相互に上書きされます。現在、テキストの影はアニメーションしますが、色はアニメーションしません。同時にアニメーションさせるにはどうすればよいですか?ご回答ありがとうございます。

Answer 1

編集: この投稿を削除するか迷っています。 CSS 構文を理解するという点では、all が存在することを人々に知らせることは良いことであり、CSS の構造によっては、100 万回の個別の宣言よりも望ましい場合があります。一方で、この仮定を裏付けるデータをまだ見たことがありませんが、パフォーマンスが低下する可能性があります。今はそれはやめておきますが、これは双方向の道であることを人々が理解してくれることを願っています。 元の投稿:

次のコードを単純に使用することもできます:

リーリー

FWIW: 指定しない場合、

all

がデフォルトであるため、transition: .2s; も同じ効果を実現できます。

Answer 2

トランジション効果をサポートするすべてのブラウザでは、トランジション属性はカンマで区切られます。

リーリー

ease はデフォルトの時間関数であるため、指定する必要はありません。本当に linear が必要な場合は、明示的に指定する必要があります:

リーリー

これは繰り返しになり始めているため、複数のプロパティで同じ時刻関数を使用する場合は、省略形の代わりにさまざまな transition-* プロパティを使用することをお勧めします。

リーリー