添加无休止且不停歇的 CSS 变换答案

【问题标题】：Add CSS Transform which goes endlessly and doesn't stop添加无休止且不停歇的 CSS 变换
【发布时间】：2021-01-02 18:24:15
【问题描述】：

我有一个想要制作动画的内联 SVG，我正在这样做：

svg {
  animation: rotate 1s 0s infinite;
  stroke: black;
}

@keyframes rotate {
  from {
    transform: rotate(0turn);
  }
  to {
    transform: rotate(1turn);
  }
}

<svg width="38" height="38" viewBox="0 0 38 38" xmlns="http://www.w3.org/2000/svg" stroke="#fff">
      <g fill="none" fill-rule="evenodd">
          <g transform="translate(1 1)" stroke-width="2">
              <circle stroke-opacity=".5" cx="18" cy="18" r="18"/>
              <path d="M36 18c0-9.94-8.06-18-18-18"></path>
          </g>
      </g>
</svg>

如果您运行动画，它会停止运行并重新开始。
有没有办法让这件事顺利进行？

【问题讨论】：

“在某些时候”究竟是什么意思？多久？您在哪些浏览器上进行测试？
"at some point" 表示动画结束的点。我正在使用最新版本的 Chrome。

标签： css animation svg

【解决方案1】：

默认的过渡时间功能是简单的。这意味着过渡在中间部分变得更快。通过将其更改为线性，动画可以顺利运行。

    svg {
        animation: rotate 1s 0s linear infinite;
    }

【讨论】：

【解决方案2】：

svg {
  animation: rotate 1s infinite linear;
}

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

<svg width="38" height="38" viewBox="0 0 38 38" xmlns="http://www.w3.org/2000/svg" stroke="#000">
      <g fill="none" fill-rule="evenodd">
          <g transform="translate(1 1)" stroke-width="2">
              <circle stroke-opacity=".5" cx="18" cy="18" r="18"/>
              <path d="M36 18c0-9.94-8.06-18-18-18"></path>
          </g>
      </g>
</svg>

【讨论】：