title: Animating box doesnot animate on firefox very well
body: <p>Here is the web site=><a href="http://waruna0sanjaya-001-site1.btempurl.com" rel="nofollow">http://waruna0sanjaya-001-site1.btempurl.com</a>
  The animating box which placed at the bottom of this page is not animating very well. Here are the html codes that has been used on it up to now.</p>
  
  <p>Here is the  code:</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>    @-webkit-keyframes spincube {
          from,to {
              -webkit-transform:rotateX(0) rotateY(0) rotateZ(0)
          }
          16% {
              -webkit-transform:rotateY(-90deg)
          }
          33% {
              -webkit-transform:rotateY(-90deg) rotateZ(90deg)
          }
          50% {
              -webkit-transform:rotateY(-180deg) rotateZ(90deg)
          }
          66% {
              -webkit-transform:rotateY(-270deg) rotateX(90deg)
          }
          83% {
              -webkit-transform:rotateX(90deg)
          }
      }
      @-moz-keyframes spincube {
          from,to {
              -moz-transform:rotateX(0) rotateY(0) rotateZ(0)
          }
          16% {
              -moz-transform:rotateY(-90deg)
          }
          33% {
              -moz-transform:rotateY(-90deg) rotateZ(90deg)
          }
          50% {
              -moz-transform:rotateY(-180deg) rotateZ(90deg)
          }
          66% {
              -moz-transform:rotateY(-270deg) rotateX(90deg)
          }
          83% {
              -moz-transform:rotateX(90deg)
          }
      }
      @-o-keyframes spincube {
          from,to {
              -o-transform:rotateX(0)rotateY(0)rotateZ(0)
          }
          16% {
              -o-transform:rotateY(-90deg)
          }
          33% {
              -o-transform:rotateY(-90deg)rotateZ(90deg)
          }
          50% {
              -o-transform:rotateY(-180deg)rotateZ(90deg)
          }
          66% {
              -o-transform:rotateY(-270deg)rotateX(90deg)
          }
          83% {
              -o-transform:rotateX(90deg)
          }
      }
      @keyframes spincube {
          from,to {
              -moz-transform:rotateX(0) rotateY(0) rotateZ(0);
              -ms-transform:rotateX(0) rotateY(0) rotateZ(0);
              transform:rotateX(0) rotateY(0) rotateZ(0)
          }
          16% {
              -moz-transform:rotateY(-90deg);
              -ms-transform:rotateY(-90deg);
              transform:rotateY(-90deg)
          }
          33% {
              -moz-transform:rotateY(-90deg) rotateZ(90deg);
              -ms-transform:rotateY(-90deg) rotateZ(90deg);
              transform:rotateY(-90deg) rotateZ(90deg)
          }
          50% {
              -moz-transform:rotateY(-180deg) rotateZ(90deg);
              -ms-transform:rotateY(-180deg) rotateZ(90deg);
              transform:rotateY(-180deg) rotateZ(90deg)
          }
          66% {
              -moz-transform:rotateY(-270deg) rotateX(90deg);
              -ms-transform:rotateY(-270deg) rotateX(90deg);
              transform:rotateY(-270deg) rotateX(90deg)
          }
          83% {
              -moz-transform:rotateX(90deg);
              -ms-transform:rotateX(90deg);
              transform:rotateX(90deg)
          }
      }
      .cubespinner {
          -webkit-animation-name:spincube;
          -webkit-animation-timing-function:ease-in-out;
          -webkit-animation-iteration-count:infinite;
          -webkit-animation-duration:12s;
          -moz-animation-name:spincube;
          -moz-animation-timing-function:ease-in-out;
          -moz-animation-iteration-count:infinite;
          -moz-animation-duration:12s;
          animation-name:spincube;
          animation-timing-function:ease-in-out;
          animation-iteration-count:infinite;
          animation-duration:12s;
          -webkit-transform-style:preserve-3d;
          -moz-transform-style:preserve-3d;
          -ms-transform-style:preserve-3d;
          transform-style:preserve-3d;
          -webkit-transform-origin:60px 60px 0;
          -moz-transform-origin:60px 60px 0;
          -ms-transform-origin:60px 60px 0;
          transform-origin:60px 60px 0
      }
      .cubespinner div {
          position:absolute;
          width:120px;
          height:120px;
          border:1px solid #ccc;
          background:rgba(255,255,255,.8);
          box-shadow:inset 0 0 20px rgba(0,0,0,.2);
          text-align:center;
          font-size:100px
      }
      .cubespinner .face1 {
          -webkit-transform:translateZ(60px);
          -moz-transform:translateZ(60px);
          -ms-transform:translateZ(60px);
          -o-transform:translateZ(60px);
          transform:translateZ(60px)
      }
      .cubespinner .face2 {
          -webkit-transform:rotateY(90deg) translateZ(60px);
          -moz-transform:rotateY(90deg) translateZ(60px);
          -ms-transform:rotateY(90deg) translateZ(60px);
          transform:rotateY(90deg) translateZ(60px);
          -o-transform:rotateY(90deg) translateZ(60px)
      }
      .cubespinner .face3 {
          -webkit-transform:rotateY(90deg) rotateX(90deg) translateZ(60px);
          -moz-transform:rotateY(90deg) rotateX(90deg) translateZ(60px);
          -ms-transform:rotateY(90deg) rotateX(90deg) translateZ(60px);
          transform:rotateY(90deg) rotateX(90deg) translateZ(60px);
          -o-transform:rotateY(90deg) rotateX(90deg) translateZ(60px)
      }
      .cubespinner .face4 {
          -webkit-transform:rotateY(180deg) rotateZ(90deg) translateZ(60px);
          -moz-transform:rotateY(180deg) rotateZ(90deg) translateZ(60px);
          -ms-transform:rotateY(180deg) rotateZ(90deg) translateZ(60px);
          transform:rotateY(180deg) rotateZ(90deg) translateZ(60px);
          -o-transform:rotateY(180deg) rotateZ(90deg) translateZ(60px)
      }
      .cubespinner .face5 {
          -webkit-transform:rotateY(-90deg) rotateZ(90deg) translateZ(60px);
          -moz-transform:rotateY(-90deg) rotateZ(90deg) translateZ(60px);
          -ms-transform:rotateY(-90deg) rotateZ(90deg) translateZ(60px);
          transform:rotateY(-90deg) rotateZ(90deg) translateZ(60px);
          -o-transform:rotateY(-90deg) rotateZ(90deg) translateZ(60px)
      }
      .cubespinner .face6 {
          -webkit-transform:rotateX(-90deg) translateZ(60px);
          -moz-transform:rotateX(-90deg) translateZ(60px);
          -ms-transform:rotateX(-90deg) translateZ(60px);
          transform:rotateX(-90deg) translateZ(60px);
          -o-transform:rotateX(-90deg) translateZ(60px)
      }
      div.stage img {
          vertical-align:inherit
      }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div class="stage wow zoomInLeft animated" data-wow-duration="1000ms" data-wow-delay="300ms" style="width: 120px; height: 120px; margin-top: 10%; margin-bottom: 10%; visibility: visible; animation-duration: 1000ms; animation-delay: 300ms; animation-name: zoomInLeft;"&gt;
    &lt;div class="cubespinner"&gt;
      &lt;div class="face1"&gt;&lt;img src="http://waruna0sanjaya-001-site1.btempurl.com/images/picx.jpg" style="opacity:0.7;" height="120" width="90"&gt;&lt;/div&gt;
      &lt;div class="face2"&gt;&lt;img src="http://waruna0sanjaya-001-site1.btempurl.com/images/picx.jpg" style="opacity:0.7;" height="120" width="90"&gt;&lt;/div&gt;
      &lt;div class="face3"&gt;&lt;img src="http://waruna0sanjaya-001-site1.btempurl.com/images/picx.jpg" style="opacity:0.7;" height="120" width="90"&gt;&lt;/div&gt;
      &lt;div class="face4"&gt;&lt;img src="http://waruna0sanjaya-001-site1.btempurl.com/images/picx.jpg" style="opacity:0.7;" height="120" width="90"&gt;&lt;/div&gt;
      &lt;div class="face5"&gt;&lt;img src="http://waruna0sanjaya-001-site1.btempurl.com/images/picx.jpg" style="opacity:0.7;" height="120" width="90"&gt;&lt;/div&gt;
      &lt;div class="face6"&gt;&lt;img src="http://waruna0sanjaya-001-site1.btempurl.com/images/picx.jpg" style="opacity:0.7;" height="120" width="90"&gt;&lt;/div&gt;
    &lt;/div&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>