术语 · 动效图鉴

只动位置和透明度

Transform & Opacity

让动画不卡的头号规则：只改位置、缩放、旋转和透明度，别去改宽高和边距。

切到「页面很忙」，看看哪个球开始卡

页面状态

跟 AI 这么说

所有动画只改 transform（位移、缩放、旋转）和 opacity（透明度），不要用 top、left、width、height、margin 做动画；需要变大变小时，用 transform: scale 代替改宽高。

改 width、height、top、left，浏览器每一帧都要重新排版，页面一忙就卡；transform 和 opacity 可以交给显卡单独处理，主线程再忙也照样流畅。