Stan Stan - 4 months ago 10
CSS Question

10s animation lasts only 4 seconds?

I'm not getting why when I set

animation: dash 10s linear forwards;
it gets finished in like 4 seconds. Is it a bug or a "feature" and if so, how can I make it last exactly 10 seconds?



.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

It's because your stroke-dasharray and stroke-dash-offset values aren't equal to the length of the path/circle circumference.

With a radius of 50 the circumference would be 2 x π x 50 which is c315. Actually 314.12 but 315 is close enough.

.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>