Animating SVG rect x property via CSS <p>I have a classic mobile three-bars menu button made with SVG. I would like to animate each bar on click.</p> <p>This is my code:</p> <p><div class="snippet" data-lang="js" data-hide="false" data-console="false" data-babel="false"> <div class="snippet-code"> <pre class="snippet-code-js lang-js prettyprint-override"><code>$('#menu_button').click( function() { $(this).toggleClass('open'); } );</code></pre> <pre class="snippet-code-css lang-css prettyprint-override"><code>#menu_button .rectangle { left: 0; x: 0; transition: all ease 1s; } #menu_button .rectangle.first { transform: rotate(0deg); top: 0; y: 0; } #menu_button .rectangle.second { transform: rotate(0deg); transform-origin: 8px 9px; top: 6px; y: 6; } #menu_button .rectangle.third { transform: rotate(0deg); transform-origin: 11px 9px; top: 12px; y: 12; } #menu_button.open .rectangle.first { top: 23.2px; y: 23.2px; } #menu_button.open .rectangle.second { transform: rotate(405deg); } #menu_button.open .rectangle.third { transform: rotate(495deg); left: 0; x: 0; top: 8px; y: 8; }</code></pre> <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"&gt;&lt;/script&gt; &lt;svg width="22" height="35" id="menu_button" class="hidden-sm hidden-md hidden-lg"&gt; &lt;rect style="opacity:1; fill:#eb671f; fill-opacity:1;stroke:none;" class="rectangle first" width="22" height="2" x="0" y="0" /&gt; &lt;rect style="opacity:1; fill:#eb671f; fill-opacity:1;stroke:none;" class="rectangle second" width="22" height="2" x="0" y="6" /&gt; &lt;rect style="opacity:1; fill:#eb671f; fill-opacity:1;stroke:none;" class="rectangle third" width="22" height="2" x="0" y="12" /&gt; &lt;/svg&gt;</code></pre> </div> </div> </p> <p>JSFiddle for those like me who can't run the snippet: <a href="https://jsfiddle.net/9rkoLcx8/2/" rel="nofollow noreferrer">https://jsfiddle.net/9rkoLcx8/2/</a></p> <p>The issue is with Firefox.</p> <p>I mean, everything is working fine on Chrome and Opera, this doesn't work on Safari (it has no animation but it's still ok as it doesn't break things up), and works half in firefox: it rotates correctly but doesn't animate the <code>x</code> and <code>y</code> of SVG rects.</p> <p><a href="https://i.stack.imgur.com/XjHNn.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/XjHNn.png" alt="enter image description here"></a></p> <p>This is what I think: <code>x</code> and <code>y</code> are <code>rect</code> attributes, not CSS properties, so not only they shouldn't work on Firefox, they shouldn't work on Chrome and Opera too. That's why I added <code>top</code> and <code>left</code>, but it still doesn't work.</p> <p>Is there a way to make the animation of <code>x</code> and <code>y</code> work in Firefox too?</p>