transform-origin not working on firefox

Question

I'm trying to make this effect on Firefox but "transfrom-origin' is not working properly, and the result on Firefox it looks way different. I want to imitate the waving effect and its working perfectly in Chrome and Opera and also Vivaldi as for IE i don't really care! Thanks

 .arm-wave 
          {
          -webkit-transform-origin: top left;
          -webkit-animation: wave 2s ease-in-out infinite;
          -moz-animation: wave 2s ease-in-out infinite;
          -o-transform: wave 2s ease-in-out infinite;
          transform: wave 2s ease-in-out infinite;
          -ms-transform: wave 2s ease-in-out infinite;
         }
@-webkit-keyframes wave  
          {
     0% {-webkit-transform: rotate(0deg) translate(0px);transform: rotate(0deg) translate(0px);
          }
     20% {-webkit-transform: rotate(-180deg) translate(-33px);transform: rotate(-180deg) translate(-33px);
         }
     40% {
          -webkit-transform: rotate(-160deg) translate(-23px);transform:  rotate(-160deg) translate(-23px);
         }
     60% {
          -webkit-transform: rotate(-180deg) translate(-33px);transform: rotate(-180deg) translate(-33px);
         }
     80% {
          -webkit-transform: rotate(-160deg) translate(-23px);transform:     rotate(-160deg) translate(-23px);

        }

   100% {
         -webkit-transform: rotate(0deg) translate(0px);transform: rotate(0deg) translate(0px);
       }
     }
 @-moz-keyframes wave {

    0% {
        -moz-transform: rotate(0deg) translate(0px);transform: rotate(0deg) translate(0px);
       }
   20% {
       -moz-transform: rotate(-180deg) translate(-33px);transform: rotate(-180deg) translate(-33px);
       }
  40% {
       -moz-transform: rotate(-160deg) translate(-23px);transform: rotate(-160deg) translate(-23px);

      }
  60% {
      -moz-transform: rotate(-180deg) translate(-33px);transform: rotate(-180deg) translate(-33px);
      }
  80% {
      -moz-transform: rotate(-160deg) translate(-23px);transform: rotate(-160deg) translate(-23px);
    }
 100% {
     -moz-transform: rotate(0deg) translate(0px);transform: rotate(0deg) translate(0px);
      }
   }

This the HTML part:

    <div id="my-svg-shape"> <svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="591.1px"
     height="768px" viewBox="0 0 591.1 768" style="enable-background:new 0 0 591.1 768;" xml:space="preserve">
  <g id="shape">
<rect id="body" x="215.6" y="240.6" class="sweater-color" width="133.7" height="230.9"/>
    <g id="right-arm" class="arm-wave">
      <rect id="right-hand" x="375.6" y="403.9" class="skin-color" width="46.5" height="16.8"/>
      <rect id="right-el" x="375.6" y="249.8" class="sweater-color" width="46.5" height="151.6"/>
    </g>
    <g id="left-arm">
      <rect id="left-el" x="143.2" y="249.8" class="sweater-color" width="46.5" height="151.6"/>
      <rect id="left-hand" x="143.2" y="403.9" class="skin-color" width="46.5" height="16.8"/>
    </g>


  </g>
  </svg> </div>

http://jsfiddle.net/rizkallah/wxs0v9gx/1/

Answer 1

A I mentioned in the comments FF has a different interpretation of transform-origin (at least as i understand it) but I've done some extra (quick) research since that comment. The linked article https://css-tricks.com/svg-animation-on-css-transforms/ has a wealth of information.

Chrome uses 50% 50 to be related the the center of the object being transformed.

Firefox uses 50% 50% to be related to the center of the SVG parent.

Therefore top left for Chrome would translate in Firefox to Xpx Ypx where X and Y are the top left co-ordinates of the transformed element.

So...for the right arm

<g id="right-arm" class="arm-wave">
      <rect id="right-hand" x="375.6" y="403.9" class="skin-color" width="46.5" height="16.8"/>
      <rect id="right-el" **x="375.6" y="249.8" class="sweater-color" width="46.5" height="151.6"/>
</g>

We would use...

transform-origin: 375.6px 249.8px;
-webkit-transform-origin: top left;

JSfiddle Demo