如何用CSS实现进度条百分比的实时数字跳动？-css教程-PHP中文网

css transition无法动画百分比数字，因其仅支持可动画属性，纯文本内容不可过渡；必须用javascript更新data-percent属性，再通过css属性选择器触发@keyframes弹入动效。

如何用css实现进度条百分比的实时数字跳动？

为什么直接用 `transition` 动不了百分比数字？

因为 CSS 的 transition 只能作用于可动画的属性（比如 width、opacity），而纯文本内容（如 innerText 或伪元素里的 content）无法被过渡。你写 transition: content 0.3s 是无效的，浏览器直接忽略。

所以“数字跳动”必须靠 JavaScript 控制数值更新，CSS 只负责视觉动效（比如数字进位时的缩放或颜色变化）。

常见错误：试图用 counter() + transition 实现数字变化 → 不生效
正确路径：JS 每帧更新 data-percent 属性，CSS 用属性选择器触发动画
性能注意：避免高频 innerHTML 写入，优先用 textContent 或 dataset

用 `data-` 属性 + `@keyframes` 做数字入场动效

让每次数字变化时，新数字有个轻微放大再回弹的效果，模拟“跳动”感。关键不是平滑过渡，而是强调变化瞬间。

/* HTML 示例 */
<div class="progress" data-percent="65"><span class="percent-text">0%</span></div>

CSS 这样写：

CSS婚礼策划服务机构宣传网站模板

CSS婚礼策划服务机构宣传网站模板是一款适合提供婚礼策划和婚庆服务机构宣传网站模板下载。提示：本模板调用到谷歌字体库，可能会出现页面打开比较缓慢。

下载

@keyframes popIn {
  0% { transform: scale(0.8); opacity: 0.7; }
  50% { transform: scale(1.1); }
  100% { transform: scale(1); opacity: 1; }
}
.progress[data-percent]:target .percent-text,
.progress[data-percent] .percent-text {
  animation: popIn 0.2s ease-out;
}

别用 :target 做触发（它依赖 URL 锚点），改用 JS 动态添加临时 class 更可控
动画时间控制在 0.15–0.25s，太长像卡顿，太短看不出效果
避免对整个 .progress 容器加动画，只作用于 .percent-text，防止布局抖动

JS 更新逻辑：防抖 + requestAnimationFrame 更稳

如果进度来自异步加载或轮询，直接 for (let i = 0; i 递增会卡顿，尤其在低端设备上。

推荐写法：

function animatePercent(el, target, duration = 300) {
  const start = parseInt(el.dataset.percent) || 0;
  const startTime = performance.now();
<p>function step(now) {
const elapsed = now - startTime;
const progress = Math.min(elapsed / duration, 1);
const eased = 1 - Math.pow(1 - progress, 3); // 缓出曲线
const current = Math.floor(start + (target - start) * eased);</p><pre class="brush:php;toolbar:false;">el.dataset.percent = current;
el.querySelector('.percent-text').textContent = `${current}%`;

if (progress <p>}
requestAnimationFrame(step);
}</p><p>// 调用
animatePercent(document.querySelector('.progress'), 87);</p>