transform动画性能优于left动画，因前者仅触发gpu合成层位移，后者强制主线程重排；需避免混用、确保初始值、统一用transform控制、慎用transition:all。

因为 left 触发重排（reflow），transform 只走 GPU 合成层，两者根本不在同一个渲染路径上。

left 动画每帧都在强制重排

浏览器改 left 时，必须重新计算元素位置、周围流式布局、换行、文本折行……这个过程叫 layout（重排），全程跑在主线程，CPU 全包。低端安卓机一帧内反复重排，耗时常达 3–8ms，远超 16.67ms 的 60fps 帧间隔。

• 即使只动一个 left，只要父容器有 overflow: hidden 或图片没设宽高，重排压力会指数级上升
• JS 里读取 offsetLeft 或 getBoundingClientRect() 会强制同步回流，让卡顿雪上加霜
• iOS Safari 对 left 过渡基本不优化，动画常表现为“一顿一顿”

transform 动画只挪图层，不碰布局

transform: translateX(100px) 不改文档流，浏览器会把它单独拎进 GPU 合成层（compositor layer），只做纹理位移和混合，跳过 layout 和 paint。

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

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

下载

• 合成层由 GPU 线程处理，不阻塞主线程，帧率更稳
• 支持 sub-pixel 渲染，缩放或小数值下不会因取整抖动
• 但前提是：不能混用 left 和 transform —— 浏览器发现冲突，直接放弃硬件加速，整条 transition 降级回 CPU

transition 写法本身不决定快慢

transition 只是声明“哪个属性变、怎么变”，真正决定性能的是你过渡的属性本身。

• 错：transition: left 0.3s → 必卡；transition: all 0.3s → 更卡（任何意外改了 margin 或 color 就静默掉帧）
• 对：transition: transform 0.3s, opacity 0.3s → 仅这两个属性可安全合成
• 别信 transform: translateZ(0) 就万事大吉——它只是提示，是否真建层得看 DevTools 的 “Layer Borders” 有没有绿框

最容易被忽略的初始化陷阱

就算你写了 transform: translateX(100px)，首次动画仍可能跳变或不动。

• 必须显式设初始值：transform: translateX(0)，否则从 none 到有值会触发 layout
• JS 动态控制时，别写 el.style.left = '100px' 后指望 CSS transition 生效——得统一走 el.style.transform = 'translateX(100px)'
• 如果原来用了 left: auto 或百分比，translateX() 不支持百分比值，得用 calc() 或 JS 算出像素值

真正卡不卡，不取决于你写了多少 will-change 或 translateZ(0)，而在于是否切断了所有 layout/paint 路径——哪怕漏掉一个 box-shadow 动态变化，GPU 加速就自动失效。

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！