Firefox和IE中的CSS3动画问题

Question

我正在尝试使用CSS3动画缩放，旋转和翻译元素。此动画在chrome中按预期工作，但我无法在Firefox和IE10中重现它。

在FF和IE中，只有缩放转换在使用时才对元素起作用：

transform: scale(.3) rotate(360deg) translateY(30px) translateX(10px);

这里有一个jsFiddle再现了这个问题：

DEMO jsFiddle

这是HTML部分：

<div class="preloader"> 
    <i></i>
</div>

CSS部分：

.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

1. IE不会need -ms属性的animation前缀，因此请删除@-ms-keyframes和-ms-animation规则。

2. 您必须在transform选择器和.preloader i规则中展开@keyframes速记，以包含您动画制作的属性的初始值：的 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;
       }
   }