为什么CSS写了transition后动画还是很生硬？

是，因属性缺初始值或动了非合成属性。transition需明确起止值，且仅transform/opacity可GPU加速；避免all、left、height等触发布局重排，慎用will-change。

transition用了但动画跳变，是不是属性没写初始值？

transition不会凭空生成中间状态，它只在“两个明确的、可计算的值之间”插帧。如果元素没设初始值（比如transform: translateX(0)），直接在:hover里写transform: translateX(20px)，浏览器可能跳过过渡、直接渲染终点——尤其在首次触发时。

1. 检查目标属性是否在常态下有显式声明，例如：opacity: 1、transform: scale(1)、background-color: rgb(255, 255, 255)
2. 避免从auto、unset或未声明状态开始过渡（如height: auto → height: 100px）
3. 颜色必须用rgb()或hsla()，十六进制如#ff0000无法插值，必然跳变

动画卡顿掉帧，是不是动了非合成属性？

CSS中只有transform和opacity能稳定走GPU合成层。一旦你写了transition: left 0.3s、width 0.3s或background-color 0.3s，浏览器就得每帧做Layout + Paint，60fps基本保不住。

1. 把left/top换成transform: translateX()或translateY()
2. 高度变化别碰height，改用max-height或transform: scaleY()
3. 背景色渐变更稳妥的做法是叠加一层opacity遮罩，而非直接过渡background-color

缓动函数选错，导致节奏感失衡

ease是默认值，但它“慢进慢出”，在悬停进入时显得拖沓；linear匀速运动又太机械，缺乏物理真实感。生硬感常来自节奏和预期不匹配。

1. 悬停进入推荐ease-out：快进慢出，响应更干脆
2. 收起/关闭动作用ease-in：慢进快出，收尾更利落
3. 想更自然，直接上cubic-bezier(0.25, 0.46, 0.45, 0.94)（Material Design标准曲线）
4. 避免transition: all 0.3s——它会把你不关心的属性也拉进来动，反而干扰主视觉

硬件加速没触发，或will-change滥用

will-change: transform不是开关，而是提示浏览器“这个元素即将变化”，让它提前分配合成层。但挂太久会吃内存，挂错地方（比如给整个body）反而拖慢首屏。

1. 只对高频动画元素加：will-change: transform, opacity
2. 动画开始前1–2帧动态添加，结束时立刻移除（监听transitionend或animationend）
3. 老版本Safari/Android Webview可用transform: translateZ(0)兜底，但现代Chrome已弱化其必要性
4. 打开Chrome DevTools → Rendering → 勾选“Paint flashing”，看动画区域是否频繁高亮——高亮范围大=重绘失控

真正卡住的地方往往不在duration数值大小，而在你动的是哪个属性、有没有让浏览器“准备好”。很多生硬感，其实是浏览器被迫降级到CPU渲染的结果。