10秒間のアニメーションはわずか4秒かかりますか？

Question

私が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>

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