CSS3 animation issue in Firefox and IE - css

Question

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.
In FF and IE, only the scale transformation works on element when using:
transform: scale(.3) rotate(360deg) translateY(30px) translateX(10px);
Here a jsFiddle which reproduces this issue: DEMO jsFiddle
This is the HTML part:
<div class="preloader">
<i></i>
</div>
CSS part:
.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;
}
}

Answer 1

IE doesn't need the -ms prefix for the animation property, so remove the #-ms-keyframes and -ms-animation rules.
You have to expand the transform shorthand on both the .preloader i selector and within the #keyframes rule to include the initial values for the properties you're animating: Demo
.preloader i {
-webkit-animation: test 1s infinite linear;
-webkit-transform:scale(0);
animation: test 1s infinite linear;
transform: scale(0) rotate(0deg) translateY(0px) translateX(0px);
}
#keyframes test {
0% {
transform: scale(1) rotate(0deg) translateY(0px) translateX(0px);
background-color:#A300A3;
}
100% {
transform: scale(.3) rotate(360deg) translateY(30px) translateX(10px);
background-color:transparent;
border-radius: 15px;
}
}