@keyframesアニメーションのタイミング

Question

私はタイマーを表示し、HTMLとCSSだけを使って99までカウントする簡単なプロジェクトを作っていました。

しかし、私が100sアニメーションに遅れを入れて10sアニメーションと同期させる必要がある理由を教えてもらえますか？

.second::before { 
 
    animation: time 100s linear 4.5s infinite; 
 
    /* Why do I have to put a delay to get this to sync properly with the second counter!?? */ 
 
    content: "0"; 
 
} 
 
.second::after { 
 
    animation: time 10s linear infinite; 
 
    content: "0"; 
 
} 
 
@keyframes time { 
 
    10% { 
 
    content: "1" 
 
    } 
 
    20% { 
 
    content: "2" 
 
    } 
 
    30% { 
 
    content: "3" 
 
    } 
 
    40% { 
 
    content: "4" 
 
    } 
 
    50% { 
 
    content: "5" 
 
    } 
 
    60% { 
 
    content: "6" 
 
    } 
 
    70% { 
 
    content: "7" 
 
    } 
 
    80% { 
 
    content: "8" 
 
    } 
 
    90% { 
 
    content: "9" 
 
    } 
 
}

<span class="second"></span>

それは簡単なように見えました。すなわち、0から9 100秒以上にカウント：1桁ごとに10秒

はまたすなわち、10秒かけて0から9までカウント：1桁毎秒

だから、（遅滞なく）し、なぜ100秒のアニメーションはアニメーションに最初の数字を約5秒間表示し、その後10秒ごとに別の数字を表示しますか？次の

CodePen例：あなたはあなたのアニメーション、10％のための一つの値と20％のために別のものを設定しoldTimer

Answer 1

方法、変更はそれが15％で、中間点で起こっています。

これは、1つのアニメーションが、0.5秒で、もう1回は5秒であることを意味します。ネット違いは、あなたがそれらをしたい場所を正確に発生する手順を設定し、それを避けるために4.5S

です：

.second { font-size: 80px; } 
 

 
.second::before { 
 
    animation: time 100s linear infinite; 
 
    /* Why do I have to put a delay to get this to sync properly with the second counter!?? */ 
 
    content: "0"; 
 
} 
 
.second::after { 
 
    animation: time 10s linear infinite; 
 
    content: "0"; 
 
} 
 
@keyframes time { 
 
    0%, 9.99% { 
 
    content: "0"; 
 
    background-color: blue; 
 
    } 
 
    10%, 19.99% { 
 
    content: "1"; 
 
    background-color: green; 
 
    } 
 
    20%, 29.99% { 
 
    content: "2"; 
 
    background-color: tomato; 
 
    } 
 
    30%, 39.99% { 
 
    content: "3" 
 
    } 
 
    40%, 49.99% { 
 
    content: "4" 
 
    } 
 
    50%, 59.99% { 
 
    content: "5" 
 
    } 
 
    60%, 69.99% { 
 
    content: "6" 
 
    } 
 
    70%, 79.99% { 
 
    content: "7" 
 
    } 
 
    80%, 89.99% { 
 
    content: "8" 
 
    } 
 
    90%, 100% { 
 
    content: "9" 
 
    } 
 
}

<span class="second"></span>