css3アニメーションsvgを同時に塗りつぶして色を変えると、クロムのバグがFFで動作する

Question

私はインラインSVGとテキストを持つリンクを持っています。 （またはアクティブなクラスを追加する）ホバーをアニメーション化したいのですが、クロムで同時に遷移は起こっていません。 Firefoxではすべてが完璧に動作しています。ここ はデモです：

[DEMO](http://codepen.io/anon/pen/QNvgvy) 

は、この問題の解決策を知っている誰かはありますか？ ありがとうございました！

Answer 1

ここでは、移行フェーズで継承されたCSSが伝播する方法のFFとChromeの違いについて考えてみます。 FFは直ちに実行しますが、Chromeで親要素への移行が完了した場合にのみ子要素に新しいスタイル値が適用されます。

この例では、https://jsbin.com/koruyeludi/1/edit?html,css,js,console,outputを見て、マウスを動かすとコンソールに表示される色の値に注意してください。

例は、.parentの中に入れられた.childの2つのスパンを持ちます。どちらにもトランジションが適用されています。親スパンの上にマウスを置くと、徐々に色が変わります。親に遷移が行われると、子ノードで色が変更されます。そしてそれはトランジションも持っているので、今すぐプレーになります。

あなたの例では* { transition: all 1s; }です。親<a>は、[0s-1s]の間に色が変化します。 <span>と<svg>は[1s-2s]の間に色が変わります。 <path>は[2s-3s]に変更を加える予定です。 これを避けるには、transition:を1度だけ適用してください - ルート<a>要素）。