title: transform-origin not working on firefox
body: <p>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   </p>
  
  <pre><code> .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);
        }
     }
  </code></pre>
  
  <p>This the HTML part:</p>
  
  <pre><code>    &lt;div id="my-svg-shape"&gt; &lt;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"&gt;
    &lt;g id="shape"&gt;
  &lt;rect id="body" x="215.6" y="240.6" class="sweater-color" width="133.7" height="230.9"/&gt;
      &lt;g id="right-arm" class="arm-wave"&gt;
        &lt;rect id="right-hand" x="375.6" y="403.9" class="skin-color" width="46.5" height="16.8"/&gt;
        &lt;rect id="right-el" x="375.6" y="249.8" class="sweater-color" width="46.5" height="151.6"/&gt;
      &lt;/g&gt;
      &lt;g id="left-arm"&gt;
        &lt;rect id="left-el" x="143.2" y="249.8" class="sweater-color" width="46.5" height="151.6"/&gt;
        &lt;rect id="left-hand" x="143.2" y="403.9" class="skin-color" width="46.5" height="16.8"/&gt;
      &lt;/g&gt;
  
  
    &lt;/g&gt;
    &lt;/svg&gt; &lt;/div&gt;
  </code></pre>
  
  <p><a href="http://jsfiddle.net/rizkallah/wxs0v9gx/1/" rel="nofollow">http://jsfiddle.net/rizkallah/wxs0v9gx/1/</a></p>