纯 CSS 无法实现真实倒计时动画，因 counter-increment 静态不可变、@keyframes 时间点固定且无法响应动态秒数；必须由 JS 控制状态更新与播放时机，CSS 仅负责视觉呈现。
纯 CSS 实现倒计时动画（如 5→4→3→2→1→0）本身不可行——counter-increment 无法响应时间推移，@keyframes 也不能动态读取当前秒数。所谓“纯 CSS 倒计时”，实际是用 CSS 驱动预设帧序列，靠 JS 控制播放时机或切换状态。
为什么不能只用 counter() 和 @keyframes 做真实倒计时
CSS 计数器（counter-increment/counter-reset）是静态的：它只在 DOM 渲染或伪元素生成时计算一次，不随时间自动更新；@keyframes 的关键帧时间点是写死的，无法根据剩余秒数动态调整 duration 或起始值。常见误解是把 animation: countdown 5s steps(5) 当成“每秒变一个数”，但它只是把 5 帧均匀摊在 5 秒内播放，和真实倒计时逻辑脱钩。
- JS 不介入时，
counter()值不会变化，哪怕你用animation触发重绘 -
steps(5)只保证跳变次数，不保证每次跳变对应 1 秒——若总时长设为 4.7s，最后一帧就卡在 0.3 秒上 - 暂停、重置、动态修改时长等交互需求，CSS 无响应能力
--countdown 自定义属性 + attr() 无法直接驱动数字显示
CSS 变量（--countdown）可以被 JS 修改，但它的值无法直接用于 content: attr(data-count) 之外的数字渲染——attr() 只读 HTML 属性，不读 CSS 变量；counter() 也不接受变量作为初始值。所以你不能写 counter-reset: sec var(--countdown)。
- 可行路径：JS 更新
element.dataset.count = n，再用content: attr(data-count)显示 - 想用 CSS 变量控制样式（如颜色、缩放），可以：
color: hsl(calc(var(--countdown) * 10), 80%, 60%) - 但变量不能参与计数逻辑，仅作“状态反射”用
真正可落地的 CSS+JS 协作方案
核心是让 JS 负责时间流与状态更新，CSS 负责视觉反馈。典型结构：
立即学习“前端免费学习笔记（深入）”；
- HTML 中每个数字位用独立
<span class="digit">，带data-digit属性存当前值 - JS 每秒更新
dataset.digit，并添加animate类触发 CSS 动画 - CSS 定义
.digit.animate::after的transform: translateY(-100%)+steps(10)滚动数字表 - 用
@property --t { syntax: '<integer>' }</integer>（仅 Chromium 系列支持）可做更精细控制，但兼容性差，不推荐生产环境依赖
示例关键片段：
.digit { position: relative; height: 1em; overflow: hidden; }<br>.digit::before { content: attr(data-digit); position: absolute; top: 0; left: 0; width: 100%; }<br>.digit.animate::before { animation: digitSlide 0.4s steps(10) forwards; }<br>@keyframes digitSlide { from { transform: translateY(0); } to { transform: translateY(-1000%); } }
容易忽略的性能与降级点
滚动数字动画若用 top 或 margin-top 触发 layout，会频繁重排；必须用 transform: translateY() 并加 will-change: transform。iOS Safari 对 steps() 支持不稳定，部分机型会跳帧，需 fallback 到 JS 控制 class 切换 + transition。
- 不要对整个
.countdown容器设opacity动画——遮罩层可能意外隐藏子元素 - 数字字体务必用等宽字体（
font-family: 'Courier New', monospace），否则宽度跳变导致容器晃动 - 倒计时归零后，记得清除
requestAnimationFrame或 clearInterval，避免内存泄漏
真正的难点不在“怎么动”，而在“怎么稳”：时间精度、动画帧率、跨浏览器行为一致性，这些都得靠 JS 锚定逻辑，CSS 只管呈现。
