SVG CSSトランスフォームアニメーション、ブラウザ間の問題

Question

私が作成しているウェブサイトの単純なハンバーガーメニューSVGアイコンを作成しています。頻繁に使用されるアイコンを少し退屈にするために、私はそれに少しのアニメーションを入れていいと思った。私は3本の横棒を回転させて（それぞれ別々に）十字を作ることにしました。

私がMacで開発しているSafariは、初めてテストしたブラウザであり、すべてが意図どおりに動作していました。しかし、私はアニメーションが壊れていることを確認するために、Firefoxで同じファイルを開くことにしました。さらに問題を調査したところ、バーに適用されたCSS変換の順序を逆にすると、正反対の効果があることに気がつきました。Firefoxの結果は完璧でしたが、Safariはアイコンを正しく表示しませんでした。

ハンバーガーのアイコンのための単純化されたコード：アニメーションが次のコードでサス・ファイルに追加されました

<svg id="hamburger" viewBox="0 0 30 30" width="30" height="30"> 
    <rect id="top" x="0" y="8px" width="30" height="2"/> 
    <rect id="middle" x="0" y="15px" width="30" height="2"/> 
    <rect id="bottom" x="0" y="22px" width="30" height="2"/> 
</svg> 

：

#top, 
#middle, 
#bottom { 
    transform-origin: center; 
    transform: none; 
    transition: transform .5s ease; 
} 

#hamburger.active { 
    #top { 
    transform: translateY(7px) rotate(45deg); 
    } 
    #middle { 
    transform: rotate(135deg); 
    } 
    #bottom { 
    transform: translateY(- 7px) rotate(45deg); 
    } 
} 

奇妙なことがあり、ときオーダーのものtranslateとrotateの変換が変換され、2つの異なるブラウザはまったく逆の結果を示します。私は変換の順序が最終結果に影響を与えることができることを理解しています（この場合はそうではないはずです）。しかし、順序を切り替えることによって '互換性'が反転する理由はわかりません。

私は、上記のコードで2つのほとんど同じCodepenの例を作成しました。 、Safariで壊れ http://codepen.io/Dimiter/pen/jrBqry

Firefoxで動作します：Firefoxで壊れSafariで

• ワークス：唯一の違いは、translateとrotate変換の順であるhttp://codepen.io/Dimiter/pen/vKxGRY

正しいです、作業アニメーション：

ブロークン・アニメーション：

どうもありがとう事前に！

Answer 1

ご質問ありがとうございます。 これはFirefoxにとって本当に興味深い問題です。 私は両方のケースをテストしましたが、実際にはWebkitはコードに問題はなく、Firefoxは要素を間違って配置しています。

これは、ブラウザ間の変換元の違いによるものだと思います。

いずれにしても、あなたのハンバーガーがfirefoxのクロスになるのを助けることができました。addind a -moz-transitionプロパティーで、トランスフォームの値が少し異なります。

はこれにあなたのコードを更新してみて、それはあなたの問題を解決するかどうかを教えてください:)

#hamburger.active { 
    #top { 
    transform: translateY(7px) rotate(45deg); 
    -moz-transform: translate(-5px,3px) rotate(45deg); 
    } 
    #middle { 
    transform: rotate(135deg); 
    } 
    #bottom { 
    transform: translateY(-7px) rotate(45deg); 
    -moz-transform: translate(5px,-7px) rotate(45deg); 
    } 
} 

もスペースなしで負の値を書くことを覚えておいてください。だから、この「-7px」ではなく、このが好きなように「 - 7px」

Answer 2

それは少し遅れて、別の答えのためだが、トランスフォームでKUTE.js Pluginを試してみて、あなたはがっかりされません。