I was experimenting with a fun project that involved creating a timer using just HTML and CSS.
But I'm curious, why do I need to add a delay to my 100s animation in order to synchronize it properly with the 10s animation?
.second::before {
animation: time 100s linear 4.5s infinite;
/* Why is there a need for delay to sync the animations properly? */
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>My initial idea was simple: count from 0 to 9 over 100 seconds (one digit every ten seconds), and from 0 to 9 over 10 seconds (one digit every second).
However, without the delay, the 100s animation shows the first digit after about five seconds, then changes digits every 10 seconds. Why does this happen?
You can view an example on CodePen at the following link: oldTimer