圆形比例动画Chrome转换的Chrome错误

Question

我在Chrome中使用简单动画遇到了一些麻烦。我正在开发一个非常简单的预加载器，它包含一个圆圈，可以及时增加它的大小。这就是我创造这个的方式：

#circle{
position:absolute;
    display:block;
        width:40px;
    height:40px;
        background:#000;
    top:50%;
    left:50%;
    margin:-20px 0 0 -20px;

    -webkit-border-radius:50%;
     -khtml-border-radius:50%;
       -moz-border-radius:50%;
            border-radius:50%;

    -webkit-transform:scale(0.3);
       -moz-transform:scale(0.3);
        -ms-transform:scale(0.3);

    -webkit-animation:loading 1.5s ease-out forwards infinite;
       -moz-animation:loading 1.5s ease-out forwards infinite;
        -ms-animation:loading 1.5s ease-out forwards infinite;
}

这就是动画：

@-webkit-keyframes loading {
    0%{-webkit-transform:scale(0.3);}
    50%{-webkit-transform:scale(1);} 
    100%{-webkit-transform:scale(0.3);}    
}

结果就是这样，只有Chrome才能切断边缘。使用webkit的Safari也可以完美呈现。 （注意顶部和左侧的切口）

最后一个问题是相关的。你会如何规划IE的图形后备？我的意思是，我可以向modernizr请求并创建后备删除它并通过JS添加图形。但我想知道只使用CSS的更好方法。

动画在IE上不起作用，因此想法是移除黑色圆圈并在其位置添加动画预加载器gif。

希望你能帮助它，因为它让我疯狂！

非常感谢！

Answer 1

看起来它被容器隐藏了。

试试这个：

 #circle {
   margin:-19px 0 0 -19px;
 }