CSSトランジションの追加

Question

Chromeで奇妙なCSS効果が発生しました（Firefoxでは発生しません）。

ウェブサイトの要素の90％以上でトランジションを使用する必要があるので、私は* CSSセレクタで基本的にすべてにトランジションを追加しました。

しかし、カプセル化された要素があると、奇妙な遅延が発生します。これは多く発生し、実際には迷惑です。

これを解決する方法はありますか？グローバルに変換するのではなく、すべての要素にトランジションを適用する方法はありますか？

ありがとうございました。

* { 
 
    transition: all 0.3s ease-out; 
 
} 
 

 
p:hover { 
 
    color: white; 
 
}

<p>Test <span>test2</span></p>

編集：私はすでにあなたがより良いあなたの要素を標的とすることによって、それを解決することができます知っているが、私はそれを行うことなく、道を求めています。

Answer 1

この解決策は、すべての遷移要素を対象とするのと同じ方向になりますが、すべてのコンテナ要素を対象とした逆の方法だけです。最初の問題は解決されません。なぜ、親要素にトランジションがあると遅延が発生するのですか？最初に親トランジションを終了し、次に子トランジションを開始します...私の試行は単なる回避策であり、彼らはすでに彼らの両親を通じて移行を持っているので、その後、それらの移行を無効に...

編集：2番目のルールにすべてのコンテナ要素を追加する必要があるだろう、多分それは

* { 
 
    transition: all 0.3s; 
 
} 
 

 
*:not(body):not(div) > * { 
 
    transition: none; 
 
} 
 

 
p:hover { 
 
    color: white; 
 
}

<div> 
 

 
    <p>Test <span>test2</span></p> 
 

 
</div>

を支援します