缩放动画在放大和缩小时打破边界半径

Question

我是运行以下代码片段：

#mydiv{
  width: 2px;
  height: 2px;
  border-radius: 50%;
  display: inline-block;
  margin: 100px;
  background-color: red;
  animation: wave 1s infinite;
}

@keyframes wave{
  0%{
    transform: scale(1, 1);
  }
  100%{
    transform: scale(100, 100);
  }
}

<div id="mydiv"></div>

通常这个动画运行良好。当我放大和缩小屏幕时出现问题。放大然后缩小后，我发现 border-radius 开始显示不正确。我已经截取了两张截图来说明它是如何获得的：

第一张图片是在 Microsoft Edge 上拍摄的。它发生在我使用 CTRL+ 和 CTRL- 放大和缩小时。在 Chrome 中做同样的事情也会产生与此完全相同的结果。第二个发生在我使用 Chrome 开发工具放大和缩小时。我在 Chrome 的 android 版本中也遇到过这种情况（这是我首先注意到的地方）。这在 Firefox 中没有发生。

我不知道为什么会这样，但我的猜测是，放大和缩小突然影响了 CSS 变换的计算。

这个错误的真正原因是什么？有解决办法吗？

Answer 1

试试这个

#mydiv{
    width: 200px;
    height: 200px;
    border-radius: 50%;
    display: inline-block;
    margin: 100px;
    background-color: red;
    animation: wave 1s infinite;
}

@keyframes wave{
    0%{
        transform: scale(0);
    }
    100%{
        transform: scale(1);
    }
}

<div id="mydiv"></div>

缩放动画在放大和缩小时打破边界半径

Scale animation breaks border radius when zoomed in and out

css

animation

transform