10s动画只有4秒？

Posted 2023-03-06

【中文标题】10s动画只有4秒？

【英文标题】：10s animation lasts only 4 seconds?

【发布时间】：2016-11-21 06:13:00

【问题描述】：

我不明白为什么当我设置animation: dash 10s linear forwards; 时它会在 4 秒内完成。它是一个错误还是一个“功能”，如果是，我怎样才能让它持续 10 秒？

.stroke-container 
  transform: rotate(270deg);
  background: green;
  width: 120px;
  height: 120px;


.stroke-1 
  stroke: red;
  animation: dash 10s linear forwards;
  stroke-dasharray: 1000;
  stroke-dashoffset: 1000;


.stroke-1-bg 
  stroke: blue;


@keyframes dash 
  to 
    stroke-dashoffset: 0;
  


svg 
  fill: none;
  stroke-width: 10px;

<svg class="stroke-container" version="1.1" xmlns="http://www.w3.org/2000/svg">
    <circle class="stroke-1-bg" cx="60" cy="60" r="50"/>
    <circle class="stroke-1" cx="60" cy="60" r="50"/>
</svg>

【问题讨论】：

Is it a bug or a "feature" ：所有错误都是无法解释的功能：D！您总是可以将时间设置为 40 秒。经过测试，由于某种原因需要 10 个

【参考方案1】：

这是因为您的 stroke-dasharray 和 stroke-dash-offset 值不等于路径/圆周的长度。

半径为 50 时，周长为 2 x π x 50，即 c315。实际上 314.12 但 315 已经足够接近了。

.stroke-container 
  transform: rotate(270deg);
  background: green;
  width: 120px;
  height: 120px;

.stroke-1 
  stroke: red;
  animation: dash 10s linear infinite;
  stroke-dasharray: 315;
  stroke-dashoffset: 315;

.stroke-1-bg 
  stroke: blue;

@keyframes dash 
  to 
    stroke-dashoffset: 0;
  

svg 
  fill: none;
  stroke-width: 10px;

<svg class="stroke-container" version="1.1" xmlns="http://www.w3.org/2000/svg">
  <circle class="stroke-1-bg" cx="60" cy="60" r="50" />
  <circle class="stroke-1" cx="60" cy="60" r="50" />
</svg>