css counter无法实现倒计时，因其静态特性不支持时间驱动更新；真正可行方案是js管理时间逻辑并更新dom，css仅负责样式与过渡动画。
用 CSS counter 做倒计时根本不可行
CSS 的 counter 是静态的，只在样式计算时读取一次 DOM 结构，无法随时间自动更新。你写 counter-increment: sec -1，它不会每秒减 1——它连“每秒”这个概念都没有。浏览器不提供定时器能力给 CSS，这是根本限制。
常见错误现象：counter() 显示的数字始终不变，或者只在页面加载/重排时跳一下；有人试图用 @keyframes 驱动 counter-increment，结果完全无效（CSS 动画不触发 counter 更新）。
使用场景别走偏：如果你真需要纯 CSS 实现的“视觉倒计时”，只能是预设固定帧数的动画（比如 3 秒倒计时 → 写死 3 帧），且无法响应用户交互或动态起始值。
真正可行的方案：JS 控制 DOM + CSS 负责样式和过渡
倒计时本质是状态驱动，必须由 JS 管理时间逻辑，CSS 只负责把当前数字“好看地”呈现出来。关键不是“怎么用 counter”，而是“怎么让 JS 更新得轻、CSS 渲染得顺”。
- 用
textContent直接更新数字容器（比innerHTML快，无解析开销） - 给数字元素加
transition: transform 0.2s ease，配合 JS 切换data-value属性，用属性选择器触发动画（避免强制同步布局） - 避免在
setInterval里直接操作style—— 容易累积 layout thrashing
示例结构：
<div class="countdown" data-value="5">5</div>JS 每秒更新
data-value 和 textContent，CSS 写：[data-value="5"]::before { content: "5"; }<br>[data-value="4"]::before { content: "4"; }——但这只适合个位数；更通用的做法还是 JS 更新文本，CSS 负责数字字体、阴影、缩放过渡。
想加数字翻牌效果？别碰 CSS counter，用两个层+transform
所谓“翻牌”（flip clock）效果，核心是前后两层数字错位叠加，靠 transform: rotateX 和 transform-origin 模拟翻转。CSS counter 在这里毫无用处，它连“上层数字”“下层数字”都分不出来。
实操要点：
- 每个数字位置放两个
<span></span>：一个.front（当前值），一个.back（下一值） - JS 更新时，先改
.back的内容，再给父容器加flipping类触发transform - 翻转动画结束，用
transitionend事件把.back内容同步到.front，移除类名 - 注意：
will-change: transform对频繁翻转的元素有必要，否则低端机掉帧
兼容性与性能容易被忽略的点
倒计时 UI 最常栽在两个地方：时间精度漂移、视觉卡顿。这不是 CSS 能解决的。
- 别用
setInterval(fn, 1000)——实际间隔可能 1002ms 或 1015ms，几轮下来就差 1 秒。应该用performance.now()或Date.now()计算剩余毫秒，每次重校准 - CSS 动画若涉及
height、width、margin，会触发重排；倒计时数字只用transform和opacity，确保进 GPU 图层 - Safari 对
will-change处理较激进，加了可能反而多占内存；Chrome 下建议加，但仅对正在翻转的元素临时加
最麻烦的其实是时区和夏令时——JS 的 Date 对象按本地时区算，如果倒计时目标是某个 UTC 时间，必须显式转换，这点没人提醒，但上线后半夜三点突然跳变，就是它在作怪。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
