如何使CSS平行圆形旋转动画更加流畅？

Question

似乎在完成一个完整的循环时会停顿一秒钟。我读到过stroke-dashoffset应该是周长或更大，但它仍然有延迟。

https://jsfiddle.net/7rzny4ms/1/

<svg width="100" height="100">
  <g>
    <circle class="progress" r="40" cx="50" cy="50" fill="none" />
  </g>
</svg>

.progress {
  stroke: #000;
  stroke-width: 4;
  stroke-dashoffset: 0;
  stroke-dasharray: 65;
  animation: progress-indef 2s linear infinite;
}

@keyframes progress-indef {
  0% { stroke-dashoffset: 251; }
  100% { stroke-dashoffset: 0; }
}

- cvdv

Answer 1

动画效果非常不错且执行正确。如果在某些设备/浏览器组合上有问题，那并不是因为它没有经过精心设计，而是因为你正在对stroke-dashoffset进行动画处理。我建议改用更少资源的transform进行动画处理：

.progress {
  stroke: #000;
  stroke-width: 4;
  stroke-dashoffset: 0;
  stroke-dasharray: 65;
  animation: progress-indef 2s linear infinite;
  transform-origin: 50% 50%;
  stroke-dashoffset: 250.92135620117188;
}

@keyframes progress-indef {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

<svg width="100" height="100">
  <g>
    <circle class="progress" r="40" cx="50" cy="50" fill="none" />
  </g>
</svg>

注意：我将stroke-dashoffset更改为250.92135620117188，因为这是返回的长度（但我不认为这种差异会导致问题）：

console.log(document.querySelector('.progress').getTotalLength())

- tao

Answer 2

在这种情况下，我建议只使用CSS来实现您需要的内容。通过使用边框和动画，您可以达到相同的效果。

CSS代码：

.loader {
   animation: loader-rotate 2s infinite linear;
   border-bottom: 5px solid transparent;
   border-left: 5px solid #000;
   border-top: 5px solid transparent;
   border-right: 5px solid #000;
   border-radius: 50%;
   height: 100px;
   position: relative;
   transform: translateZ(0);
   width: 100px;
}

@keyframes loader-rotate {
   0% { transform: rotate(0deg); }
   100% { transform: rotate(360deg); }
}

HTML

<div class='loader'></div>

在jsfiddle上检查它是否工作。

- Italo Borges