background-color 动画不生效是因为 CSS 无法对 linear-gradient 等复合背景做插值，应改用 width + overflow 配合子元素实现平滑填充，避免直接 transition background-color。
点击按钮触发进度条填充，为什么 background-color 动画不生效
直接用 transition 对 background-color 做动画，但点击后颜色“跳变”而非渐变，是因为 CSS 无法对渐变色（linear-gradient）或复合背景做插值动画。哪怕你只改了其中一色 stops，浏览器也当它是不可动画属性。
- 真正可动画的是
background-size（控制渐变显示范围）或width（用块元素遮罩） - 推荐方案：用一个子元素（如
<span>）作为填充层，通过width+transition控制伸展 - 避免写
background: linear-gradient(...); transition: background-color 0.3s—— 这行代码完全无效
用 width + overflow 实现平滑填充的最小可行结构
别套复杂框架，原生 HTML/CSS 就够。关键是父容器设 overflow: hidden，子元素从 width: 0% 开始过渡到目标值。
<div class="progress-bar"> <span class="fill"></span> </div> <button id="startBtn">开始</button>
对应 CSS：
.progress-bar {
height: 8px;
background: #e0e0e0;
border-radius: 4px;
overflow: hidden;
}
.fill {
display: block;
height: 100%;
width: 0%;
background: #4caf50;
transition: width 0.4s ease-out;
}
JS 只需一行修改：document.querySelector('.fill').style.width = '75%';
立即学习“前端免费学习笔记（深入）”；
多次点击时进度卡住或跳回 0%，怎么修复
问题根源是每次点击都重置 width 到 0%，再设新值 —— 如果前一次动画还没结束，新值会覆盖中间状态，导致视觉跳跃或卡顿。
- 加个防抖：用
getComputedStyle(el).width读取当前宽度，再基于它计算增量 - 更稳妥做法：用
requestAnimationFrame手动控制帧，或直接用setTimeout延迟触发（简单场景够用） - 别在事件里反复调
el.style.width = '0%'—— 这是绝大多数“卡住”的原因
移动端点击无响应？检查 pointer-events 和 touch-action
某些安卓 WebView 或 iOS Safari 下，button 在 position: relative 容器里可能失焦，或者 overflow: hidden 父级意外拦截了 touch 事件。
- 给按钮加
touch-action: manipulation，提升点击响应优先级 - 确保进度条父容器没设
pointer-events: none（常见于遮罩层误配） - 真机调试时用 Safari 的 “Enable JavaScript Debugger” 查看事件是否冒泡到按钮
填充动画本身没问题，但交互链断在第一环——点不下去，后面再顺也没用。
