transition 是复合动画控制属性，不直接改变样式，仅描述可过渡属性（如 opacity、transform）在状态变化时的过渡过程；必须配合伪类、媒体查询或 JS 修改等触发源才能生效，且不支持 display 等不可过渡属性。
transition 不是基础 CSS 属性，而是复合动画控制属性 —— 它本身不直接改变样式，只负责“如何变化”。 你写 transition: all 0.3s，页面不会动；只有当某个可过渡属性（比如 opacity 或 transform）在状态间真实变化时，它才起作用。这点常被初学者误认为“加了 transition 就会有动画”，结果 hover 无反应、JS 修改无效，根源往往在此。
transition 必须配合状态变化才能生效
它不是独立动画，而是对“属性值变更过程”的描述。没有触发源，它就静默待命。
- 常见触发方式：伪类（
:hover、:focus）、媒体查询（@media）、JavaScript 动态修改 class 或 style -
不能靠
display: none → block触发 ——display不在可过渡属性列表中，浏览器直接跳变，transition 完全忽略 - 想实现“显示+淡入”，得用
opacity+visibility或transform组合替代
transition-property 决定“谁动”，不是“全都能动”
写 transition: all 0.3s 看似省事，但实际很多属性根本不可过渡（如 z-index、font-family、content），甚至会引发意外重排（reflow）。
- 推荐显式声明：例如
transition-property: opacity, transform, background-color -
transform和opacity是性能最优组合 —— 浏览器可交由合成层（compositor）处理，不触发布局或重绘 - 避免用
width/height做过渡：会强制触发 layout，卡顿明显，尤其在低端设备上
transition-delay 和 timing-function 的实际影响远超“看起来”
延迟和缓动函数不是装饰项，它们直接影响交互反馈是否自然、用户能否感知状态变化。
立即学习“前端免费学习笔记（深入）”；
-
transition-delay: 0.1s可缓解“误触抖动”：鼠标轻微划过不立即响应，提升容错性 -
ease-out适合退出动画（如菜单收起），ease-in适合入场（如 tooltip 弹出），linear仅适用于进度条、计时器等需节奏稳定场景 - 慎用
cubic-bezier(0.17, 0.67, 0.83, 0.67)这类“弹跳感”曲线 —— 在表单提交、按钮点击等关键操作中易造成操作迟疑
真正容易被忽略的是：transition 的“一次性”本质 —— 它只响应属性值的首次变化，后续连续修改（比如 JS 频繁设 style.left）可能被浏览器合并或丢帧。需要循环动画或复杂时序，请直接上 @keyframes + animation。
