我正在尝试制作一个纯HTML/CSS的倒计时动画,但我很难使它流畅地运行。目前我只涵盖了分钟和秒钟。请注意,我使用
目前一切都正常,除了对应于x10分钟的数字与其余数字不同步更改。 接下来我将粘贴我的代码和两个codepen,第一个是正常版本,具有正确的时间以进行正常操作,另一个是快10倍的版本,这样您就可以快速了解问题所在。
animation-delay
属性将我的倒计时重置为某个初始时间。目前一切都正常,除了对应于x10分钟的数字与其余数字不同步更改。 接下来我将粘贴我的代码和两个codepen,第一个是正常版本,具有正确的时间以进行正常操作,另一个是快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; }
60% { margin-top: -12rem; }
70% { margin-top: -14rem; }
80% { margin-top: -16rem; }
90% { margin-top: -18rem; }
100% { margin-top: -20rem; }
}
body {
background-color: black;
}
.container {
background-color: white;
}
.digit {
display: inline-block;
height: 2rem;
overflow: hidden;
width: 1ch;
}
.digit span {
display: block;
height: 2rem;
width: 100%;
}
.minutes-digit-one {
animation: tick6 3600s step-end;
animation-iteration-count: infinite;
animation-delay: -540s;
}
.minutes-digit-two {
animation: tick10 600s step-end;
animation-iteration-count: infinite;
animation-delay: -540s;
}
.seconds-digit-one {
animation: tick6 60s step-end;
animation-iteration-count: infinite;
animation-delay: -540s;
}
.seconds-digit-two {
animation: tick10 10s;
animation-iteration-count: infinite;
animation-delay: -540s;
}
<div class="container">
<div class="digit">
<span class="minutes-digit-one">5</span>
<span>4</span>
<span>3</span>
<span>2</span>
<span>1</span>
<span>0</span>
<span>5</span>
</div>
<div class="digit">
<span class="minutes-digit-two">9</span>
<span>8</span>
<span>7</span>
<span>6</span>
<span>5</span>
<span>4</span>
<span>3</span>
<span>2</span>
<span>1</span>
<span>0</span>
<span>9</span>
</div>
<div class="digit">
<span>:</span>
</div>
<div class="digit">
<span class="seconds-digit-one">5</span>
<span>4</span>
<span>3</span>
<span>2</span>
<span>1</span>
<span>0</span>
<span>5</span>
</div>
<div class="digit">
<span class="seconds-digit-two">9</span>
<span>8</span>
<span>7</span>
<span>6</span>
<span>5</span>
<span>4</span>
<span>3</span>
<span>2</span>
<span>1</span>
<span>0</span>
<span>9</span>
</div>
</div>