CSS缩放动画不连贯主因是过渡配置不当或渲染机制未优化：transition须写在默认状态、限定为transform属性、启用GPU加速（如translateZ(0)），并避免JS触发时引起布局重排。
CSS 缩放动画不连贯，通常不是因为 transform: scale() 本身有问题，而是触发条件、过渡属性或渲染机制没配对。关键在让浏览器明确知道“要过渡什么”“怎么过渡”“何时开始”，并避免强制重排重绘。
确保 transition 写在正确位置
transition 必须写在元素的默认（非 hover/active 等）状态上，而不是只写在伪类里。否则首次触发时没有过渡，第二次才生效，造成“第一次卡、后面顺”的错觉。
- ✅ 正确写法：基础样式就带 transition
- ❌ 错误写法：只在
:hover里写transition: transform 0.3s ease;
限定 transition 的具体属性
别用 transition: all 0.3s ease;。它会让所有可动画属性一起过渡，包括可能意外变化的 opacity、color，甚至触发 layout，拖慢性能。
- ✅ 推荐：
transition: transform 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94); - ✅ 更稳妥：
transition: transform 0.3s ease-out;（ease-out开头快、结尾缓，观感更自然）
启用硬件加速，避免 repaint
scale 属于合成属性（composited property），但若元素没被提升为独立图层，仍可能触发重绘。加个 will-change: transform; 或轻量级 hack 可主动触发 GPU 加速：
立即学习“前端免费学习笔记（深入）”；
- ✅ 推荐（轻量）：
transform: scale(1) translateZ(0);（translateZ(0)强制创建新图层） - ✅ 进阶（按需）：
will-change: transform;（注意：仅在动画频繁时加，避免滥用） - ⚠️ 注意：不要同时加
translateZ(0)和will-change，可能冗余
检查触发方式是否引起 layout 波动
如果缩放是通过 JS 动态改 class 触发的，确保 class 切换不伴随 width/height/margin/padding 等布局属性变化；否则 layout → paint → composite 链路过长，动画必然卡顿。
- ✅ 做法：缩放只靠
transform，其他样式（如尺寸、边距）保持静态 - ✅ 验证：在 Chrome DevTools → Rendering → 勾选 “Paint flashing” 和 “FPS meter”，看动画时是否有大面积黄色闪烁（paint）
