transition-duration必须显式设置非零值，否则默认0s导致无动画；它须定义在元素初始状态而非:hover中，且仅对background-color、opacity、transform等可插值属性生效。
必须显式声明 transition-duration，否则过渡完全不生效——这是最常被忽略的前提。
transition 必须写在初始状态里，不能只写在 :hover 中
很多人把 transition 放在 :hover 规则里，结果动画一闪而过或根本不触发。它必须定义在元素的默认样式中，让浏览器提前知道“接下来哪些变化要走过渡流程”。
-
transition是“监听器”，不是“执行器”；它得先挂好，等属性值真变了才起作用 - 错误写法：
.btn:hover { background-color: #2E8B57; transition: background-color 0.3s; }（无效） - 正确写法：
.btn { background-color: #4A90E2; transition: background-color 0.3s ease-in-out; } .btn:hover { background-color: #2E8B57; }
只对可动画属性生效，display/height:auto 等会直接失效
transition 不是万能的，它只支持数值型、颜色型、可插值的 CSS 属性。像 display、height: auto、font-family 这类无法计算中间值的属性，加了 transition 也白搭。
- 可用的典型属性：
background-color、opacity、transform、border-color、box-shadow、max-height（需设具体数值） - 想实现“展开收起”，别用
height，改用max-height并设一个足够大的上限值（如max-height: 500px） - 需要隐藏/显示，用
opacity+visibility组合，而不是display
多属性过渡要用逗号分隔，不能空格
想同时过渡背景色和缩放，transition: background-color 0.3s, transform 0.3s 是对的；写成 transition: background-color 0.3s transform 0.3s 就会只生效第一个。
立即学习“前端免费学习笔记（深入）”；
- 每个过渡项是独立的三元组：
property duration timing-function - 可以混用不同持续时间：
transition: background-color 0.3s, transform 0.5s ease-out - 避免滥用
all：它会让所有可动画属性都参与，可能引发意外动画（比如无意中过渡了margin）
真正容易卡住的地方，往往不是语法写错，而是没意识到 transition 是“被动响应”机制——它不主动播放，只在值真实变化时才启动。所以检查 DOM 是否真的更新了样式、浏览器是否重绘、有没有更高优先级的内联样式覆盖，比反复调参数更重要。
