不能直接用@property让数字自增，它仅使变量可动画；递增逻辑必须由js控制，css只负责将数值变化映射为平滑位移或颜色过渡。
不能直接用 @property 让数字“自增”，它只负责让变量可动画；真正的递增逻辑必须由 JS 控制，CSS 只管把变化映射成平滑位移或颜色过渡。
为什么 transition: --num 0.3s 完全没反应
浏览器默认把所有自定义属性当字符串处理，--num 从 5 变到 12，它看到的是两个独立字符串，中间没有插值路径。不注册 @property，CSS 就不知道该按数字规则算差值，更不会触发重绘。
-
syntax必须是带尖括号的合法类型，比如'<number>'</number>（单引号包裹，不能漏） -
inherits: false是硬性要求，设成true在 Chromium 中会静默失效 -
initial-value类型必须匹配：用'<number>'</number>就得写0，不是"0"或0px - 注册语句必须出现在使用该变量的样式规则之前，且作用域要覆盖目标元素（通常放
:root）
注册后怎么让数字“滚动”起来
单纯让 --num 动起来没用，用户看不到数值变化——得把它转成视觉位移。最稳的方式是用等宽字体 + 垂直堆叠数字 + transform: translateY(calc(var(--num) * -48px))。
- 容器高度必须等于单个数字高度（如
font-size: 48px→height: 48px） - 数字列表用
<span>0</span><span>1</span>...9垂直排列，每行一个 - 位移公式里的负号不能省，单位推荐
px（%在 Safari 中可能解析失败） - 必须加
font-variant-numeric: tabular-nums，并指定等宽字体链，例如font-family: 'SF Mono', 'Consolas', monospace
JS 更新值时最容易踩的三个坑
动画是否平滑，90% 取决于 JS 怎么改值。错一步，就退化成跳变。
- 必须用
el.style.setProperty('--num', targetValue)，不能用setAttribute或修改innerHTML -
targetValue必须是纯数字（72），不能是字符串（"72"），否则@property拒绝解析 - 避免高频连续调用（比如
requestAnimationFrame每帧都 setProperty），建议节流或用插值函数生成中间值再一次性设置
别忘了兼容性不是“有或无”，而是“在哪失效”
@property 在 Chrome 108+、Edge 109+、Safari 16.4+ 支持，Firefox 完全不支持。但更隐蔽的问题是：Safari 16.4 虽支持 @property，却对 syntax: '<color>'</color> 的跨格式插值（如 red → hsl(120,100%,50%)）支持不完整，容易静默回退为跳变。
真正可靠的检测不是 @supports (@property: --x)，而是 CSS.supports('transition', '--x 1s') + 运行时 fallback 类名切换。数值递增动效里，最容易被忽略的其实是字体度量一致性——哪怕用了 tabular-nums，不同字体的数字宽度微差也会导致滚动抖动。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
