title: css3 animation - transform: scale3D on firefox 45.0
body: <p>first post here.
  I'm trying to make an image (red background for instance) squash and stretch via transform scale3D, which work, but not on all browsers.
  I can't figure out why this animation work on chrome(48.0), but on firefox(45.0) it isn't.</p>
  
  <p>Thanks for helping out :)</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>window.onload = function() {
  
    function init() {
      var hand = document.getElementById('handMove');
  
      var pfx = ["webkit", "moz", "MS", "o", ""];
  
      function PrefixedEvent(element, type, callback) {
        for (var p = 0; p &lt; pfx.length; p++) {
          if (!pfx[p]) type = type.toLowerCase();
          element.addEventListener(pfx[p] + type, callback, false);
        }
      }
  
      setInterval(function() {
        hand.id = "handMove";
      }, 4500);
  
      function AnimationListener() {
        hand.id = "handMove2";
      }
  
  
  
      PrefixedEvent(hand, "AnimationEnd", AnimationListener);
    }
  
    init();
  };</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>#monster {
  
    position: absolute;
  
    -o-filter: drop-shadow(5px -15px 10px rgba(0, 0, 0, 0.5));
  
    -moz-filter: drop-shadow(5px -15px 10px rgba(0, 0, 0, 0.5));
  
    -webkit-filter: drop-shadow(5px -15px 10px rgba(0, 0, 0, 0.5));
  
    filter: drop-shadow(5px -15px 10px rgba(0, 0, 0, 0.5));
  
    width: 150px;
  
    height: 188px;
  
    bottom: 5%;
  
    left: 50%;
  
    margin-left: -75px;
  
    background-size: contain;
  
    background-repeat: no-repeat;
  
    background: red;
  
    -o-transform-origin: bottom center;
  
    -moz-transform-origin: bottom center;
  
    -webkit-transform-origin: bottom center;
  
    transform-origin: bottom center;
  
    -o-animation: squash 0.3s ease-in-out both infinite alternate;
  
    -moz-animation: squash 0.3s ease-in-out both infinite alternate;
  
    -webkit-animation: squash 0.3s ease-in-out both infinite alternate;
  
    animation: squash 0.3s ease-in-out both infinite alternate;
  
  }
  
  -o-@keyframes squash {
  
    100% {
  
      -o-transform: scale3D(1.03, 0.95, 10);
  
    }
  
  }
  
  -moz-@keyframes squash {
  
    to {
  
      -moz-transform: scale3D(1.03, 0.95, 10);
  
    }
  
  }
  
  -webkit-@keyframes squash {
  
    100% {
  
      -webkit-transform: scale3D(1.03, 0.95, 10);
  
    }
  
  }
  
  @keyframes squash {
  
    100% {
  
      -webkit-transform: scale3D(1.03, 0.95, 10);
  
    }
  
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;!DOCTYPE html&gt;
  &lt;html lang="en"&gt;
  
  &lt;head&gt;
    &lt;meta charset="UTF-8"&gt;
    &lt;meta name="viewport" content="width=device-width, initial-scale=1.0"&gt;
    &lt;title&gt;Title&lt;/title&gt;
  
    &lt;link rel="stylesheet" type="text/css" href="style.css" /&gt;
  &lt;/head&gt;
  
  &lt;body&gt;
    &lt;div class="wraper"&gt;
      &lt;div id="monster"&gt;&lt;/div&gt;
    &lt;/div&gt;
    &lt;script type="text/javascript" rel="script" src="main.js"&gt;&lt;/script&gt;
  &lt;/body&gt;
  
  &lt;/html&gt;</code></pre>
  </div>
  </div>
  </p>