圆形缩放动画带CSS转换的Chrome bug

我在Chrome中遇到了一些简单的动画问题。我正在研究一个非常简单的预加载器，它包含一个能够及时增加其大小的圆圈。这是I'm如何创建这样的：圆形缩放动画带CSS转换的Chrome bug

#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也完美地呈现了这一点。（注意顶部和左侧切）

enter image description here

而在去年的一些相关问题。你将如何规划IE的图形回退？我的意思是，我可以问modernizr并创建一个删除它并通过JS添加图形的后备。但是我想知道只使用CSS的更好方法。

该动画不适用于IE浏览器，因此这个想法将删除黑色圆圈并在其位置添加一个动画预加载器gif。

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

非常感谢！

来源

2013-03-07 BeatLaG

我有相同的问题（但对我来说发生在底部和右侧）。任何解决方案 – Andrei 2014-08-05 12:49:00

它看起来像是被它的容器隐藏起来。

试试这个：

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

来源

2013-03-07 17:23:46 Andy

容器是100％/ 100％的图层。只有这个元素被设置在视口的中间。所以它是由任何包装裁剪。在Opera，Safari和FF上，它正在按照应有的方式工作。只有Chrome Win/Mac正在以这种方式工作。不管怎么说，还是要谢谢你！ – BeatLaG 2013-03-07 17:30:28

圆形缩放动画带CSS转换的Chrome bug

回答

相关问题