纯css无法直接动画content，需用js更新css变量配合clip-path或transform等可动画属性实现数字增长效果。
用 ::after 伪元素 + content 显示动态数字
纯 CSS 实现数字增长动画，核心是绕过「content 不支持直接动画」的限制：不能对 content 值本身做 @keyframes，但可以控制伪元素显示哪一帧——本质是“切换预设内容”。::after 的 content 可绑定 CSS 变量（attr() 不行，必须用 var(--num)），而变量值可由 JS 动态更新，再配合 transition 或 @keyframes 驱动视觉变化。
关键点：
-
content: var(--num, "0");是合法写法，但变量值变更本身不会触发动画——需配合其他可动画属性（如opacity、transform、clip-path）制造“增长感” - 若想纯 CSS 驱动（无 JS），只能预先定义有限帧数，用
animation-delay控制逐帧显示，不适用于任意目标值 - 更实用的路径是：JS 更新
--num，CSS 负责过渡效果（如数字翻转、淡入叠加）
用 counter-increment + counter-reset 模拟递增（无 JS）
这是真正“纯 CSS”的递增方案，但仅适用于已知步长与总次数的场景（比如统计固定数量的列表项）。它不依赖变量，而是利用 CSS 计数器机制，在伪元素中用 counter() 函数输出当前计数值。
示例结构：
.counter {
counter-reset: num 0;
}
.counter-item {
counter-increment: num 1;
}
.counter-item::after {
content: counter(num);
}
问题在于：它无法实现「从 0 到 123 的平滑增长动画」，只在 DOM 渲染时一次性计算。若想模拟增长过程，得手动展开 123 个元素并逐个延迟动画——不现实。
所以这个方案只适合静态计数展示，或配合 JS 动态插入元素来“触发”计数器递增。
结合 JS 更新 --num + CSS clip-path 实现数字翻页效果
最接近“带动画的数字增长”的实用方案：JS 控制变量，CSS 用 clip-path 做数字条滚动效果（类似老式计数器）。每个数字高度固定，容器只显示一行，通过裁剪位置变化切换可见数字。
HTML 结构示例：
<div class="digit" style="--target: 7"></div>
CSS 关键部分：
.digit {
--height: 32px;
height: var(--height);
overflow: hidden;
background: #fff;
}
.digit::before {
content: "0123456789";
display: block;
animation: slide-up 1s ease-out forwards;
animation-play-state: paused;
clip-path: inset(0 0 var(--target) 0);
}
.digit.running::before {
animation-play-state: running;
}
@keyframes slide-up {
to { transform: translateY(calc(var(--target) * -100%)); }
}
JS 触发方式：
const el = document.querySelector('.digit');
el.style.setProperty('--target', 7);
el.classList.add('running');
注意点：
-
clip-path: inset()中第三个参数是“裁掉底部多少”，需和目标数字匹配（如显示 7，就裁掉底部 3 行，保留顶部 7 行） - 实际项目中建议把数字串扩展为 "00000000001111111111222..." 多行拼接，避免单行换行错位
- 该方案兼容性较好（Chrome 55+/Firefox 56+），但 Safari 对
clip-path动画支持不稳定，可降级为transform: translateY()+ 多层数字叠加
为什么不用 content 直接做 @keyframes？
因为 CSS 规范明确禁止对 content 属性做动画或过渡：content 是“非可动画属性”（not animatable）。尝试写 transition: content 1s 或在 @keyframes 中修改 content，浏览器会直接忽略该声明，且不报错。
常见误判现象：
- 写
@keyframes change-num { to { content: "100"; } }→ 完全无效，控制台无提示 - 用
attr(data-num)绑定 HTML 属性，再试图动画该属性 → 属性值变，但content不重绘，除非 DOM 强制重排（如改class） - 以为
will-change: content有用 → 实际无效，will-change不支持content
真正起作用的永远是“可动画属性”：颜色、透明度、位移、缩放、裁剪区域。数字增长的动画感，必须靠这些间接手段营造，而不是幻想 content 自己动起来。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
