title: CSS3 animation issue in Firefox and IE
body: <p>I'm trying to scale, rotate and translate an element using CSS3 animation. This animation works as expected in chrome but i'm unable to reproduce it in Firefox and IE10.</p>
  
  <p>In FF and IE, only the scale transformation works on element when using:</p>
  
  <pre><code>transform: scale(.3) rotate(360deg) translateY(30px) translateX(10px);
  </code></pre>
  
  <p>Here a jsFiddle which reproduces this issue: <h2><a href="http://jsfiddle.net/xyTC4/" rel="nofollow">DEMO jsFiddle</a></h2></p>
  
  <p>This is the HTML part:</p>
  
  <pre><code>&lt;div class="preloader"&gt; 
      &lt;i&gt;&lt;/i&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>CSS part:</p>
  
  <pre><code>.preloader {   
      width:240px;
      height:30px
  }
  .preloader i {
      position:absolute;
      top:0;
      background-color:transparent;
      width:29px;
      height:29px;
      border: 1px solid #fff;
      -webkit-animation: test 1s infinite linear;
      -webkit-transform:scale(0);
      -ms-animation: test 1s infinite linear;
      -ms-transform:scale(0);
      animation: test 1s infinite linear;
      transform:scale(0);
      border-radius:30px 0px 10px 0px;
  }
  .preloader i {
      left:0;
      -webkit-animation-delay:0.52s;
      -ms-animation-delay:0.52s;
      animation-delay:0.52s;
  }
  @-webkit-keyframes test {
      0% {
          -webkit-transform:scale(1);
          background-color:#A300A3;
      }
      100% {
          -webkit-transform:scale(.3) rotate(360deg) translateY(30px) translateX(10px);
          background-color:transparent;
          border-color:transparent;
          border-radius: 15px;
      }
  }
  @-ms-keyframes test {
      0% {
          -ms-transform:scale(1);
          background-color:#A300A3;
      }
      100% {
          -ms-transform:scale(.3) rotate(360deg) translateY(30px) translateX(10px);
          background-color:transparent;
          border-radius: 15px;
      }
  }
  @keyframes test {
      0% {
          transform:scale(1);
          background-color:#A300A3;
      }
      100% {
          transform: scale(.3) rotate(360deg) translateY(30px) translateX(10px);
          background-color:transparent;
          border-radius: 15px;
      }
  }
  </code></pre>