You could improve the keyframe code by only including 0% and 100%. The other animation keyframes don't do anything useful for you if you want a smooth and even transition for the full length of the animation.
The animation seemed to go faster than the countdown timer and didn't seem to hit 50% when the timer was at 0:30 seconds. This seemed to be the only way to slow it down.
It seems to be the case 🤷 It may also be the case in that the animation's duration is not directly tied to the countdown timer--so there may be discrepancy in when the timer and animation start.
You could improve the keyframe code by only including 0% and 100%. The other animation keyframes don't do anything useful for you if you want a smooth and even transition for the full length of the animation.
The animation seemed to go faster than the countdown timer and didn't seem to hit 50% when the timer was at 0:30 seconds. This seemed to be the only way to slow it down.
That's strange, even if using 0/100% instead of from/to?
It seems to be the case 🤷 It may also be the case in that the animation's duration is not directly tied to the countdown timer--so there may be discrepancy in when the timer and animation start.
Check out the animation-timing-function property. (The default is not linear.)
Great call!