Css 动画持续时间不准确

我在SVG中创建了加载微调器，但动画持续时间不准确。例如：

• 30秒动画持续时间~26秒（真实）
• 45秒动画持续时间~38秒（真实）
• 60秒动画持续时间~51秒（真实）

我绝望了，我不知道哪里会出错。你能帮我吗

旋转器的屏幕#1

微调器屏幕#2-稍后

---

stroke dasharray

值应等于圆的周长，此动画才能正常工作。圆的半径只有20，因此周长（2*PI*半径）等于125.66，但在较小的代码中，您将直径（

@spinnerSize

）设置为46，因此，

行程数组

的计算值为144.44（大于圆周长）

如果一个值在30秒内从0变为144.44，它必须每秒递增（大约）4.81，因此当它达到26秒标记时，该值变为（26*4.81）=125.81（大约）。由于该值大于周长，因此看起来动画已提前完成，而实际上它仍在为该值设置动画，直到其达到144.44

在下面的代码片段中，我将

125

设置为最终值，并按预期运行30秒。在更少的代码中，您需要基于圆半径的两倍来计算行程数组。不要直接修改

@spinnerSize

变量的值，因为这会修改一些其他属性，最终会影响SVG圆圈的显示

svg.spinner{
显示：块；
宽度：46px；
高度：46px；
/*x:0px；
y:0px*/
背景：url（“../images/ico\u timer\u small.png”）中心不重复；
}
旋转圆{
填充：透明；
冲程：#027eff；
笔画宽度：3；
行程：125；
变换原点：23px 23px 0；
变换：旋转（-90度）；
动画名称：微调器；
动画计时功能：线性；
动画持续时间：30秒；
笔划线头：对接；
}
@关键帧微调器{
从{
行程偏移：125；
}
到{
笔划偏移：0；
}
}

<svg class="circle">
  <circle cx="23" cy="23" r="20"/>
</svg>

@spinnerSize: 46;

svg.spinner {
  display: block;
  width: (@spinnerSize + 0px);
  height: (@spinnerSize + 0px);
  x: 0px;
  y: 0px;
  background: url("../images/ico_timer_small.png") center center no-repeat;

  circle {
    fill: transparent;
    stroke: #027eff;
    stroke-width: 3;
    stroke-dasharray: (3.14 * @spinnerSize);
    transform-origin: (0.5px * @spinnerSize) (0.5px * @spinnerSize) 0;
    transform: rotate(-90deg);
    animation-name: spinner;
    animation-timing-function: linear;
    animation-duration: 30s;
    stroke-linecap: butt;
  }
}

@keyframes spinner {
  from {
    stroke-dashoffset: (3.14 * @spinnerSize);
  }
  to {
    stroke-dashoffset: 0;
  }
}