transition必须写在元素默认样式中，而非:hover等触发态；仅对可插值属性生效，禁用display、height:auto等；渐变色不可过渡，需用opacity或background-position替代；优先使用transform触发硬件加速。

transition 要写在初始状态，不是 hover 或动画触发态

很多人把 transition 写在 :hover 里，结果动画只进不出，或者根本没效果。它必须定义在元素的「默认样式」中，浏览器才能监听属性变化并启动过渡流程。

常见错误现象：:hover 时颜色变了，但鼠标移开时立刻跳回原样，毫无过渡；或者第一次悬停无动画，第二次才有。

• transition 只对「可计算、可插值」的 CSS 属性生效，比如 opacity、transform、background-color、width（需有明确单位）
• 绝对不能用于 display（none ↔ block）、height（从 0 到 auto）这类不可插值的切换
• 若想过渡 height，请改用 max-height + 固定足够大的值（如 max-height: 500px），并确保初始/终态都设为具体数值

别直接过渡 background-image 或渐变色 stop 位置

CSS 不支持对 linear-gradient() 中的颜色节点（如 red 20%）或整个渐变函数做插值过渡——浏览器会直接跳变，或完全忽略过渡。

正确做法是过渡 background-color，或用两层元素叠加 + opacity 切换，或借助 background-position 配合重复渐变图案实现“移动感”。

• 想让渐变背景“流动”，可用 background-position: 0% 0% → 100% 100%，配合 background-size: 200% 200%
• 若必须换不同方向/色值的渐变，推荐用 JavaScript 切换预设类名，再靠 transition: background 0.4s ease（部分浏览器支持，但兼容性有限）
• 稳妥方案：用 opacity 控制两个带不同渐变的伪元素（::before/::after）叠层淡入淡出

timing-function 选错会让“平滑”变卡顿

ease 是默认值，但并不总是最顺的；对入场动画，ease-out 更自然；对收尾或强调结束，ease-in 更利落；循环交互建议用 ease-in-out。

CSS工具箱(专业版)

全功能 CSS 工程手册，覆盖性能优化、无障碍、设计系统与跨浏览器兼容。

下载

真正影响体感的是贝塞尔曲线控制点——比如 cubic-bezier(0.34, 1.56, 0.64, 1) 这种“过冲”曲线，能让元素略超目标再回弹，比纯 ease 更生动，但调试成本高。

• Chrome DevTools 里点击 ease 旁的小图标可拖拽调曲线，实时预览
• 避免用 step-start / step-end 做“平滑渐变”，那是帧动画逻辑，和 transition 语义冲突
• 移动端上，linear 在快速滚动中可能显得生硬，ease-out 更贴合手指惯性

硬件加速没加，再平滑也掉帧

只靠 transition: background-color 0.3s 很安全，但一旦涉及 width、height、top/left 等触发布局重排（reflow）的属性，动画就容易卡顿。

解决方案是把动画剥离到合成层（compositor layer）：用 transform: translateZ(0) 或 will-change: transform 提前告知浏览器该元素将动，启用 GPU 加速。

• 优先用 transform: translateY() 替代 top，用 scale() 替代 width/height
• will-change 别滥用——只加在真正要动画的元素上，且动画结束后最好移除（可用 JS 监听 transitionend）
• 测试时打开 Chrome 的「Rendering」面板，勾选「Paint flashing」，看是否仍有大面积绿色重绘区

过渡本身不难，难的是判断哪个属性真能平滑、哪个浏览器偷偷降级、哪条贝塞尔曲线在 iPhone 上才不晕。这些细节不验证，写一百遍 transition 也还是“看起来卡”。

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