CSS 动画：为什么我的旋转圈在摇晃？答案

【问题标题】：CSS animation: Why is my spinning circle wobbling?CSS 动画：为什么我的旋转圈在摇晃？
【发布时间】：2022-11-12 04:47:44
【问题描述】：

我正在尝试使用 SVG 和 CSS 创建一个简单的加载动画，但由于某种原因，旋转的圆圈有点摇晃。它几乎不引人注意，但它让我发疯。

下面是演示问题的 Codepen 的链接：https://codepen.io/signorbusi/pen/dyeJqmE

这是代码：

@keyframes spin {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

#spinner {
  animation-name: spin;
  margin-top: 2rem;
  animation-duration: 0.5s;
  animation-iteration-count: infinite;
  animation-timing-function: linear;
  transform-origin: center center;
}

<div class="wrapper">
  <svg id="spinner" xmlns="http://www.w3.org/2000/svg" width="48" height="48" viewBox="0 0 48 48" stroke="black">
    <circle r="23" cx="24" cy="24" stroke-width="2"/>
  </svg>
</div>

任何关于如何摆脱摇摆的指示都会非常有帮助！

【问题讨论】：

它在 Codepen 或嵌入式 Stack Snippet（在 MacOS Firefox 或 Chrome 中）中似乎都没有出现波动。
Safari IOS 15.4 iPad 没有晃动。
@omnibrain 出于好奇，我的解决方案是否解决了您的问题？
奇怪的是，如果我在 SO 上运行代码片段，我不会摇晃，但如果我在 CodePen 上打开链接，我会摇晃。 @codedude 是的，您的解决方案有效，但我不明白为什么

标签： css animation svg

【解决方案1】：

<svg> 元素的视图框在旋转时会切断圆的边缘。（请注意，您的 stroke-width 正在将圆的大小增加到超出 r 属性中定义的半径。）

如果您扩展 <svg> 元素的 width 和 height 属性，则相应地匹配 viewbox 属性，然后将圆圈居中（使用 <circle> 上的 cx 和 cy 属性）元素），它不会“摆动”：

<div class="wrapper">
  <svg id="spinner" xmlns="http://www.w3.org/2000/svg" width="60" height="60" viewBox="0 0 60 60" stroke="black">
    <circle r="23" cx="30" cy="30" stroke-width="2"/>
  </svg>
</div>

工作 Codepen 可以在这里找到：https://codepen.io/theodorewiersema/pen/NWMXowY

【讨论】：

您的解决方案有效，没有更多的摆动。那太好了。但我不明白解释，因为我的圈子似乎也完全在视图框内。
@omnibrain 我怀疑这可能是一个特定于浏览器的渲染错误，与圆圈及其笔划如何成为别名有关。为了在你的圆圈周围画一个“平滑”的宽度 1 笔划，它可能会在视图框之外“平滑”它。

【解决方案2】：

这应该有效：

<circle r="22" cx="24" cy="24" stroke-width="2"/>

我将radius attribute 更改为 22，它不会摇晃。

【讨论】：

它确实对我来说摇摆不定。另外，如果您能解释为什么它应该起作用，那将很有帮助。
您的答案可以通过额外的支持信息得到改进。请edit 添加更多详细信息，例如引用或文档，以便其他人可以确认您的答案是正确的。你可以找到更多关于如何写好答案的信息in the help center。