CSS如何制作进度条增长动画_利用width百分比变化过渡

用transition动画width百分比时，必须设初始width（如width: 0%）并写在初始状态上，同时确保父容器有明确宽度、添加overflow: hidden；JS控制需避免同步读写，推荐requestAnimationFrame或CSS自定义属性。

用 transition 动画 width 百分比，必须设初始 width

直接写 width: 0% → width: 80% 不会动，因为没声明初始值或没触发重排。浏览器需要明确知道“从哪开始变”。

• 进度条容器（如 <div class="progress-bar">）必须有明确的 width 初始值，比如 width: 0% 或 width: 0（但推荐百分比，避免单位混用）
• transition 要写在初始状态上，不是只写在变化后： .progress-bar { width: 0%; transition: width 0.4s ease-in-out; }
• 别漏掉 overflow: hidden，否则内容溢出时动画看起来“不对劲”

百分比 width 动画卡顿？检查父容器是否设了 width

如果父元素没设宽度（比如 div 默认块级、宽度 100%），子元素用 width: 60% 是合法的，但某些浏览器在动画中会反复计算布局，导致掉帧。

• 确保父容器有明确宽度，例如 max-width: 400px 或 width: 100%（且其祖先也收敛）
• 用 transform: scaleX() 替代 width 更流畅，但要注意它不改变文档流，会影响点击区域和内部文字换行
• 如果只是视觉进度，transform + will-change: transform 是更稳的选择

JS 控制进度时，别直接改 style.width 后立刻读取

常见错误：设置 el.style.width = '75%' 然后马上 console.log(el.offsetWidth)，结果还是旧值——浏览器没来得及重绘。

• 需要强制重排再读，比如加一句 el.offsetHeight（触发 layout）
• 更稳妥的做法是用 requestAnimationFrame 延迟到下一帧：
  

  el.style.width = '75%';<br>requestAnimationFrame(() => console.log(el.offsetWidth));

• 如果用 CSS 自定义属性（--progress）+ calc()，就绕开了 JS 读写冲突，但兼容性需查 calc() 在 width 中的支持情况（IE 不支持）

IE 兼容不了 transition 宽度？fallback 方案很有限

IE10+ 支持 transition，但 IE9 及以下完全不支持；而且 IE 对 % 单位过渡的处理不稳定，尤其嵌套 flex 或 table 布局里。

立即学习“前端免费学习笔记（深入）”；

• 别指望用 @keyframes 模拟——IE9 不支持，IE10–11 的 @keyframes 对 width 动画支持极差
• 真要兼容 IE9，只能用 JS 定时器 + setInterval 逐帧设 width，或者用 SVG <rect> 的 width 属性（SVG 动画兼容性更好）
• 现代项目建议直接放弃 IE9，但若必须支持，优先检测 transition 是否可用：
  if ('transition' in document.documentElement.style) { /* 用 CSS 过渡 */ } else { /* 降级为 JS 循环 */ }

实际写的时候，最常被忽略的是父容器宽度收敛和 JS 读写时机。这两个点一错，动画要么不动、要么跳变、要么只在 DevTools 打开时才正常——不是代码问题，是渲染机制没对齐。