支持 transition 的 CSS 属性需满足可计算、可插值，如 opacity、transform、color、width（带单位）、background-color；display、height（auto）、font-family 等不可插值属性无效。
transition 哪些 CSS 属性能用
不是所有样式变化都能触发 transition。只有「可计算、可插值」的属性才支持，比如 opacity、transform、color、width（需有明确数值单位）、background-color。但像 display、height（从 auto 变化）、font-family 这类不可插值或离散型属性，加了 transition 也没动画效果。
常见踩坑点：
-
height: auto→height: 100px不会过渡，得改用max-height或transform: scaleY() -
visibility不支持过渡，想隐藏+淡出得组合用opacity+visibility，并用transitionend事件清理 -
margin/padding能过渡，但布局抖动明显，优先考虑transform替代位移
transition-duration 和 timing-function 怎么配才不卡
过渡时间太短（如 0.1s）人眼难感知，太长（如 1s）又拖沓。多数交互推荐 0.2s–0.4s；视觉反馈类（如按钮按压）用 0.15s 更跟手。
缓动函数别硬套 ease。真实体验中：
立即学习“前端免费学习笔记（深入）”；
- 入口动画（如弹层出现）用
cubic-bezier(0.25, 0.46, 0.45, 0.94)（类似ease-out），先快后慢更自然 - 退出动画（如折叠收起）用
cubic-bezier(0.55, 0.06, 0.68, 0.19)（类似ease-in），避免突然消失 - 避免用
linear，机械感强；也少用ease-in-out，中间段易显迟滞
transition 触发时机和重绘陷阱
transition 不是写上就动——它只在「属性值发生改变时」才启动，且依赖浏览器是否检测到「样式重排（reflow）」或「重绘（repaint）」。常见失效场景：
- JS 中连续设置两个样式（如先改
opacity再改transform），浏览器可能合并渲染，导致只触发一次过渡 - 解决办法：用
getComputedStyle(el).opacity或setTimeout(() => {}, 0)强制触发重排 - 用
will-change: transform提前告知浏览器该元素将动画，避免首次过渡卡顿（但别滥用，会增加内存开销） - 不要给
:hover和class切换都写同一组transition，容易因 CSS 优先级或层叠顺序导致过渡方向错乱
transition 和 transform 搭配为什么更稳
直接动画 left、top 或 width 会触发 layout，性能差；而 transform（尤其是 translate3d）走 GPU 合成层，几乎不卡顿。
实际写法建议：
- 位移统一用
transform: translateX(10px)，别用left: 10px - 缩放/旋转用
transform: scale(1.2) rotate(5deg)，比改width/height+transform-origin更可控 - 透明度变化必须用
opacity，transform无法替代 - 多个动画同时发生时，把它们写进同一个
transform值里，而不是拆成多个transition声明
真正难的是让过渡「看起来对」——不是参数堆得多，而是选对属性、卡准时机、避开重排。很多“不流畅”问题，其实出在没意识到浏览器渲染管线那几毫秒的延迟。
