带有 CSS 转换的圆形缩放动画 Chrome 错误

Posted 2023-03-05

【中文标题】带有 CSS 转换的圆形缩放动画 Chrome 错误

【英文标题】：Circle scale animation Chrome bug with CSS transforms

【发布时间】：2013-02-23 00:47:33

【问题描述】：

我在 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 上被切断。 Safari，也使用 webkit 完美地呈现了这一点。 （注意顶部和左侧的切口）

还有最后一个问题。您将如何计划 IE 的图形回退？我的意思是，我可以要求 modernizr 并创建后备方案，删除它并通过 JS 添加图形。但我想知道一种仅使用 CSS 的更好方法。

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

希望你能帮忙，因为它让我发疯了！

非常感谢！

【问题讨论】：

我有完全相同的问题（但对我来说，它发生在底部和右侧）。有什么解决办法吗？

【参考方案1】：

看起来它被它的容器隐藏了。

试试这个：

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

【讨论】：

容器是100%/100%的层。只有这个元素单独设置在视口的中间。所以它可以被任何包装器裁剪。在 Opera、Safari 和 FF 上，它可以正常工作。只有在 Chrome Win/Mac 上才能以这种方式工作。还是谢谢！

【参考方案2】：

问题与border-radius的属性有关，把圆改成svg图片。