怎样在CSS中实现数字不断递增滚动的动画效果-css教程-PHP中文网

纯 CSS 无法真正递增数字，@property 是目前唯一能触发数值过渡的方案，但仅 Chrome 108+/Edge 109+ 支持；counter-increment + @keyframes 不可行，因其离散触发且 counter() 不支持插值；实际项目推荐 JS 驱动数值 + CSS 位移动画。

怎样在css中实现数字不断递增滚动的动画效果

纯 CSS 无法真正“递增”数字，@property 是目前唯一能触发数值过渡的方案，但仅 Chrome 108+、Edge 109+ 支持，Safari / Firefox 完全不支持。

为什么 `counter-increment` + `@keyframes` 做不了递增动画

很多人尝试用 counter-reset 和 counter-increment 配合 @keyframes 实现滚动，结果数字只闪一下就跳到目标值，中间没有过渡。原因很直接：

counter-increment 是离散触发的，浏览器不会为中间值（比如 3.5）生成内容
@keyframes 里不能对 counter() 插值，它只在渲染时求值，不是响应式变量
steps(10) 只是把动画切成 10 段，每段显示的仍是整数 counter 值，没有位移逻辑

`@property` 是唯一可行的纯 CSS 递增路径（但限制极多）

它让 CSS 自定义属性变成可动画的类型，配合 transition 或 @keyframes 才能产生平滑变化。但必须满足所有硬性前提：

必须声明 inherits: false 和 initial-value
只能用于类型（不能是，否则 Safari 直接忽略）
动画目标值必须是合法数字，比如 100，不能是 "100"
需配合 content: attr(data-value) 或 JS 同步更新 DOM 文本，否则视觉不更新

示例（仅现代 Chromium）：

CSS工具箱(专业版)

全功能 CSS 工程手册，覆盖性能优化、无障碍、设计系统与跨浏览器兼容。

下载

@property --num {
  syntax: '<number>';
  inherits: false;
  initial-value: 0;
}
.number {
  --num: 0;
  animation: inc 2s forwards;
}
@keyframes inc {
  to { --num: 123; }
}
.number::before {
  content: attr(data-value);
}
/* 注意：这里仍需 JS 把 data-value 动态设为 Math.round(var(--num)) */
</number>