是，因属性缺初始值或动了非合成属性。transition需明确起止值，且仅transform/opacity可GPU加速；避免all、left、height等触发布局重排，慎用will-change。
transition用了但动画跳变，是不是属性没写初始值？
transition不会凭空生成中间状态，它只在“两个明确的、可计算的值之间”插帧。如果元素没设初始值（比如transform: translateX(0)），直接在:hover里写transform: translateX(20px)，浏览器可能跳过过渡、直接渲染终点——尤其在首次触发时。
- 检查目标属性是否在常态下有显式声明，例如：
opacity: 1、transform: scale(1)、background-color: rgb(255, 255, 255) - 避免从
auto、unset或未声明状态开始过渡（如height: auto→height: 100px） - 颜色必须用
rgb()或hsla()，十六进制如#ff0000无法插值，必然跳变
动画卡顿掉帧，是不是动了非合成属性？
CSS中只有transform和opacity能稳定走GPU合成层。一旦你写了transition: left 0.3s、width 0.3s或background-color 0.3s，浏览器就得每帧做Layout + Paint，60fps基本保不住。
- 把
left/top换成transform: translateX()或translateY() - 高度变化别碰
height，改用max-height或transform: scaleY() - 背景色渐变更稳妥的做法是叠加一层
opacity遮罩，而非直接过渡background-color
缓动函数选错，导致节奏感失衡
ease是默认值，但它“慢进慢出”，在悬停进入时显得拖沓；linear匀速运动又太机械，缺乏物理真实感。生硬感常来自节奏和预期不匹配。
- 悬停进入推荐
ease-out：快进慢出，响应更干脆 - 收起/关闭动作用
ease-in：慢进快出，收尾更利落 - 想更自然，直接上
cubic-bezier(0.25, 0.46, 0.45, 0.94)（Material Design标准曲线） - 避免
transition: all 0.3s——它会把你不关心的属性也拉进来动，反而干扰主视觉
硬件加速没触发，或will-change滥用
will-change: transform不是开关，而是提示浏览器“这个元素即将变化”，让它提前分配合成层。但挂太久会吃内存，挂错地方（比如给整个body）反而拖慢首屏。
立即学习“前端免费学习笔记（深入）”；
- 只对高频动画元素加：
will-change: transform, opacity - 动画开始前1–2帧动态添加，结束时立刻移除（监听
transitionend或animationend） - 老版本Safari/Android Webview可用
transform: translateZ(0)兜底，但现代Chrome已弱化其必要性 - 打开Chrome DevTools → Rendering → 勾选“Paint flashing”，看动画区域是否频繁高亮——高亮范围大=重绘失控
