纯CSS倒计时动画 [英] Pure CSS countdown animation
问题描述
我正在尝试制作纯HTML / CSS倒计时动画,但我正在努力使其顺利运行。目前,我只讲几分钟和几秒钟。请注意,我正在使用 animation-delay
属性将倒计时重置为某个初始时间。
I'm trying to do a pure HTML/CSS countdown animation but I'm struggling to make it work smoothly. For now I'm only covering minutes and seconds. Notice that I'm using animation-delay
property for resetting my countdown to a certain initial time.
现在除了与x10分钟相对应的数字没有与其余数字保持同步之外,其他所有功能都工作正常。
接下来,我将粘贴我的代码和两个Codepen,第一个是具有正确行为定时的普通版本,另一个是速度快10倍的版本,因此您可以快速发现问题。
For now everything is working fine, except the digit corresponding to the x10 minutes which is not changing sync with the rest of the digits. Following I will paste my code and two codepens, a first normal version with the correct timings for a normal behaviour and another one 10 times faster so you can quickly appreciate the problem.
- https://codepen.io/ecazorla/pen/WKdZpQ (普通版)
- https:// codepen。 io / ecazorla / pen / bjapeN (速度快10倍)
- https://codepen.io/ecazorla/pen/WKdZpQ (normal version)
- https://codepen.io/ecazorla/pen/bjapeN (10 times faster version)
@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>
推荐答案
这归因于关键帧的百分比值。您使用的是 16%
,而应该是 16.6667%
( 100/6
),与其他值相同。
This is due to the percentage values of the keyframes. You are using 16%
while it should be 16.6667%
(100/6
) to be more exact and accurate, same thing with the others values.
使用 360s
时或 3600s
作为持续时间,您将在 16%
和 16.6667%
,因此状态将更早更改,并且您将遇到同步问题。当使用 6s
作为秒的持续时间时,您可能不会注意到这一点。
When using 360s
or 3600s
as a duration you will have a clear difference between 16%
and 16.6667%
thus the state will change earlier and you will have the synchronisation issue. You may not notice this when using 6s
as duration with the seconds.
@keyframes tick6 {
0% { margin-top: 0; } /* 0*(100/6) */
16.6667% { margin-top: -2rem; } /* 1*(100/6) */
33.3333% { margin-top: -4rem; } /* 2*(100/6) */
50% { margin-top: -6rem; } /* 3*(100/6) */
66.6667% { margin-top: -8rem; } /* 4*(100/6) */
83.3333% { margin-top: -10rem; } /* 5*(100/6) */
100% { margin-top: -12rem; } /* 6*(100/6) */
}
@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 360s infinite step-end;
/*animation-delay: -54s;*/
}
.minutes-digit-two {
animation: tick10 60s infinite step-end;
/*animation-delay: -54s;*/
}
.seconds-digit-one {
animation: tick6 6s infinite step-end;
/*animation-delay: -54s;*/
}
.seconds-digit-two {
animation: tick10 1s infinite step-end;
}
<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>
这篇关于纯CSS倒计时动画的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!