如何制作 CSS 计时器
# 写在前面
本文内容是根据How to Make a CSS Timer (opens new window)翻译而来，感谢作者PREETHI SAM (opens new window)。
# 背景
在网站上，有时我们需要使用计时器。
或许我们希望为一场测验计时，或是在调查中增加压力。也许我们只是想在用户完成了某些了不起的事情（如成功预订音乐会门票）后，制造一种戏剧性的倒计时效果。我们可能在尝试构建一个微型时间管理工具（想想番茄工作法）。或者，这仅仅是一个替代旋转器用户界面的方法。
当这些情况出现时，我毫不犹豫地会使用 JavaScript，这通常是一种更强大的工具。然而，当最简单的选择是最佳选择时，CSS 替代品同样有趣且高效。如今，一些电子邮件客户端具备很强的 CSS 功能，但永远不会运行 JavaScript，所以这种情况可能是一个有趣的渐进增强。
让我们看看制作一个 CSS 计时器需要什么。我们将使用一些现代 CSS 技术来完成它。需要哪些方法呢？
- css 计数器
- @property
- 伪元素
- @keyframes 关键帧
- 通过 css 添加一些视觉效果
我们的 CSS 计时器有三个主要要求：
- 一个可以从 5 递减到 0 的数字
- 一种计时五秒并在每个秒内递减数字的方法
- 一种在页面上显示递减数字的方法
# css 的@property 定义数值
对于我们的第一个要求，可更新的数字，我们将使用 @property 创建一个自定义属性，该属性将保存类型为 integer 的值。
注意：整数可以是零，也可以是正整数或负整数。如果您想要带小数点的数字，请使用 number，它保存的是实数。
@property --n {
syntax: '<integer>';
inherits: false;
initial-value: 0;
}
2
3
4
5
# 计数
为了跟踪秒数，在减少数字的同时，我们需要使用 @keyframes 动画。
@keyframes count {
from {
--n: 5;
}
to {
--n: 0;
}
}
2
3
4
5
6
7
8
动画功能通过 animation 属性来实现。
.timer:hover::after {
animation: 5s linear count;
}
2
3
当我们为特定值类型（例如 integer、percentage 或 color）注册自定义属性时，浏览器就知道该属性是为与该特定类型的值配合使用的。
有了这些知识，浏览器就可以自信地在将来更新自定义属性的值，甚至在动画过程中也是如此。
这就是为什么我们的属性 --n 可以在动画中从 5 变为 0，而且由于动画设置为五秒，所以这实际上是在五秒内从五数到零。因此，计时器诞生了。
但仍然需要将计数的数字打印到页面上。如果您之前没有注意到，我已经将动画分配给了一个伪元素，这应该会为您提供下一步的线索 content。
# 显示
属性 content 可以显示我们自己尚未添加到 HTML 的内容。我们通常将此属性用于各种事物，因为它接受各种值 — 图像、字符串、计数器、引号，甚至属性值。但是，它不直接接受数字。因此，我们将通过 counter 向其输入数字 --n。
可以使用 counter-reset 或 counter-increment 设置计数器。我们将使用 counter-reset。此属性的值是计数器名称和整数。由于 counter-reset 尚未正确处理整数的 CSS 变量或自定义属性，但接受 calc()，因此 calc() 函数成为我们的武器，我们将在其中发送 –n。
.timer:hover::after {
animation: 5s linear count;
animation-fill-mode: forwards;
counter-reset: n calc(0 + var(--n));
content: counter(n);
}
2
3
4
5
6
7
即：
我们的动画数字 --n 首先被输入到 calc()
calc() 随后被输入到 counter()
counter()函数 又被输入到内容，最终在页面上呈现 --n。
其余部分由浏览器处理。它知道 --n 是一个整数。浏览器跟上动画，在五秒内将此整数从 5 更改为 0。然后，由于整数用于内容值，浏览器会在页面更新时显示该整数。 在动画结束时，animation-fill-mode：forwards; 样式规则可防止计时器立即恢复到初始 --n 值零。
这是最终的演示效果:
