10s动画只持续4秒？

Question

我不明白为什么当我设置 animation: dash 10s linear forwards; 时它会在大约 4 秒内完成。是错误还是 "feature" 如果是，我怎样才能让它持续恰好 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>

Answer 1

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

半径为 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>

10s动画只持续4秒？

10s animation lasts only 4 seconds?

css

animation

svg

keyframe

css-animations