我正在尝试做一个纯HTML/CSS倒计时动画,但我很难让它顺利运行.现在我只是在几分钟和几秒钟之内.请注意,我正在使用animation-delay属性将我的倒计时重置为某个初始时间.
现在一切正常,除了对应于x10分钟的数字,它没有改变与其余数字的同步.下面我将粘贴我的代码和两个codepens,第一个正常版本具有正常行为的正确时间,另一个正常版本快10倍,因此您可以快速了解问题.
@keyframes tick6 {
0% { margin-top: 0; }
16% { margin-top: -2rem; }
33% { margin-top: -4rem; }
50% { margin-top: -6rem; }
66% { margin-top: -8rem; }
83% { margin-top: -10rem; }
100% { margin-top: -12rem; }
}
@keyframes tick10 {
0% { margin-top: 0; }
10% { margin-top: -2rem; }
20% { margin-top: -4rem; }
30% { margin-top: -6rem; }
40% { margin-top: -8rem; }
50% { margin-top: -10rem; } …