纯CSS倒计时动画
纯CSS倒计时动画
提问于 2018-07-30 22:15:09
我试图做一个纯HTML/CSS倒计时动画，但我正在努力让它顺利地工作。现在，我只介绍分钟和秒。请注意，我使用animation-delay属性将倒计时重置为某个初始时间。
现在一切正常，除了与x10分钟相对应的数字没有改变与其他数字同步。接下来，我将粘贴我的代码和两个代码，第一个正常版本具有正常行为的正确计时，另一个快10倍，以便您可以快速了解问题。
- https://codepen.io/ecazorla/pen/WKdZpQ (普通version)
- https://codepen.io/ecazorla/pen/bjapeN (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>
回答 1
Stack Overflow用户
回答已采纳
发布于 2018-07-30 22:42:13
这是由于关键帧的百分比值造成的。您正在使用16%，而它应该是16.6667% (100/6)，以便更精确和准确，与其他值相同。
当使用360s或3600s作为持续时间时，你会在16%和16.6667%之间有一个明显的区别，因此状态会更早改变，你会有同步问题。当使用6s作为持续时间和秒数时，您可能没有注意到这一点。
@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>
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/51596004
复制相关文章
相似问题