10 초 애니메이션은 4 초만 지속됩니까?

Question

나는 왜 내가 animation: dash 10s linear forwards;을 설정하면 4 초 안에 완료되지 않는지 알 수 없다. 버그 또는 "기능"입니까? 그렇다면 정확히 어떻게 10 초 만에 만들 수 있습니까? 당신의 stroke-dasharray 및 stroke-dash-offset 값은 경로/원 둘레의 길이가 동일하지 않기 때문에

.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

그것은이다.

반지름이 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>