使用 requestAnimationFrame 结合时间戳差值计算实现高精度倒计时，为每位数字封装独立翻转结构（top/bottom 双卡片），通过 transform: rotateX 与 @keyframes 控制平滑翻转动画，并用 animationend 事件（含多前缀兼容及超时兜底）重置状态，避免 layout thrashing 和渲染错位。
直接用 setInterval 配合 DOM 更新 + CSS 动画类切换，就能做出平滑、可复用的数字倒计时动画。关键不在“炫”，而在「每次数字变化都触发独立动画」和「避免 layout thrashing」。
怎么让每个数字翻转动起来（不是简单 fade）
翻转效果依赖两个数字卡片叠放：当前值（top）和下一个值（bottom），靠 transform: rotateX 和 transform-origin 控制翻转轴心。必须给每个时间位（如“天”的十位、“秒”的个位）单独封装结构，不能把整个字符串当一个元素去 animate。
- HTML 结构示例：
<div class="digit-group"><div class="digit top">3</div><div class="digit bottom">2</div></div> - CSS 中需设
.digit { position: absolute; backface-visibility: hidden; }，否则翻转时背面会透出 - 动画必须用
@keyframes定义完整翻转过程（0% → 50% → 100%），不能只靠transition，否则无法控制中间帧节奏 - 每次更新数字前，先给
.bottom赋新值，再加flip类；动画结束时移除类并交换 top/bottom 的文本内容
为什么用 requestAnimationFrame 替代 setInterval 更稳
倒计时精度要求高，尤其在页面失焦或后台运行时，setInterval 容易跳秒甚至卡顿。而 requestAnimationFrame 能对齐屏幕刷新率，配合时间戳计算差值，可保证逻辑时间不漂移。
- 不要写
setInterval(() => { update() }, 1000)—— 浏览器可能节流到 1s 以上 - 正确做法：记录上一次执行的时间戳，在
raf回调里用Date.now() - lastTime >= 1000判断是否该更新 - 这样即使页面切到后台再切回，也能一次性补全跳过的秒数，而不是“假装没发生”
animationend 事件监听常被忽略的坑
翻转动画结束后要重置 DOM 状态，但 animationend 并不总按预期触发 —— 比如动画被强制中断、CSS 类未生效、或浏览器未启用硬件加速时。
立即学习“前端免费学习笔记（深入）”；
- 必须监听所有前缀：
animationend、webkitAnimationEnd、mozAnimationEnd - 不能只靠事件驱动后续逻辑，要加超时兜底：比如
setTimeout(() => { resetIfNotDone() }, 1200) - 如果多个数字同时翻转，事件会多次触发，注意用
e.target区分具体是哪个.digit-group - 别在动画中修改
display: none或visibility: hidden，这会导致animationend不触发
移动端真机上数字抖动/错位怎么办
主要来自字体渲染差异和 flex 布局在 Safari/iOS 上的兼容问题，特别是当使用等宽字体（如 Rajdhani）时，不同数字宽度微小不一致会被放大。
- 给每个
.digit加固定宽高 +text-align: center+line-height匹配高度，比仅靠 flex 更可靠 - 避免用
ch或em做宽度单位，统一用px或rem - iOS Safari 对
transform-style: preserve-3d支持不稳定，翻转动画建议降级为rotateY（左右翻）而非rotateX（上下翻） - 测试时务必连真机调试，Chrome DevTools 的 device emulation 无法还原真实渲染偏差
真正难的不是写出动画，而是让每个数字在各种设备、各种系统、各种页面状态（后台/唤醒/缩放）下都保持同步、不跳、不卡、不错位。多一个 will-change: transform，少一次重排，差的就是最终体验的临界点。
