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 animation 属性的 -ms 前缀，因此删除 @-ms-keyframes 和 -ms-animation规则。

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