CSS transition无法动画百分比数字，因其仅支持可动画属性，纯文本内容不可过渡；必须用JavaScript更新data-percent属性，再通过CSS属性选择器触发@keyframes弹入动效。
为什么直接用 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 这样写：
立即学习“前端免费学习笔记（深入）”；
@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 < 1) requestAnimationFrame(step);} requestAnimationFrame(step); }
// 调用 animatePercent(document.querySelector('.progress'), 87);
- 不要用
setTimeout或setInterval控制帧率，容易丢帧或累积延迟 -
Math.floor()防止小数点后多位（比如65.9999999%），影响视觉干净度 - 如果只是静态展示（如初始化后不再变），直接设值 + 触发一次动画 class 即可，不用完整动画逻辑
IE 兼容性与字体渲染细节
IE11 不支持 requestAnimationFrame，但更麻烦的是它对 transform 动画中文字渲染有锯齿，尤其缩放时。
- 加
-ms-transform: translateZ(0)强制 GPU 加速（仅 IE） - 避免在动画中同时改
font-size，IE 下易闪屏；统一用transform: scale() - 如果项目必须支持 IE，把“跳动”降级为淡入+颜色变化，放弃缩放动效
- Chrome/Firefox 下注意
will-change: transform不要滥用，仅在动画元素上设置
数字跳动的本质是感知上的“瞬时反馈”，不是数学意义上的连续插值。重点在于用户视线落过去时，能立刻察觉数值变了——这比“丝滑”更重要。
