transition没生效是因为属性不可插值（如display、height:auto）、未在初始状态声明、或JS操作导致过渡声明丢失；须用opacity/max-height替代，transition写在基础类，确保起始值明确且属性类型一致。
直接用 transition 做过渡，但多数人卡在“动了但不自然”或“根本不动”上——问题通常不在会不会写，而在属性选错、触发条件没满足、或浏览器悄悄跳过了动画。
为什么 transition 没生效？常见失效原因
过渡不是写了就动，它依赖三个硬性前提：属性值必须可计算、必须发生实际变化、且该属性本身支持插值动画。
-
display、visibility、z-index等离散属性不能过渡；想“淡入”，得用opacity而非display: none → block -
height: auto无法过渡，因为auto不是具体数值；改用max-height（设一个足够大的固定值）可曲线救国 - 初始状态和结束状态的值类型必须一致，比如
color: #000→color: rgba(0,0,0,0.5)可以，但color: red→color: transparent在部分旧浏览器中可能 fallback 为硬切 - 父元素或自身有
transform: translateZ(0)或will-change: transform时，若未正确重置，可能干扰后续过渡链
transition-property 到底该写 all 还是具体属性？
写 all 看似省事，实则埋雷：它会把所有可变属性（包括你没意识到的 box-shadow、border-color、甚至 outline）一并过渡，导致悬停时出现意外抖动或延迟响应。
- 按钮动效推荐明确列出：
transition: background-color 0.25s ease-in-out, transform 0.25s ease-in-out - 图标+文字组合按钮，如果只希望图标位移，就只写
transition: transform 0.2s，避免文字颜色或 padding 被牵连 - 需要兼容 Safari 旧版本时，
transform必须写全称-webkit-transform，否则过渡不触发
如何让 transition 动作更顺、更像“真实反馈”？
自然感来自节奏控制，而不是堆参数。0.3s 的 ease 并不适合所有场景。
立即学习“前端免费学习笔记（深入）”；
- 按钮悬停反馈建议用
ease-in-out+0.2s–0.25s：比默认ease更轻快，避免起始粘滞 - 入场动画（如弹窗浮现）可用
cubic-bezier(0.34, 1.56, 0.64, 1)，轻微 overshoot 让它“落定”更可信 - 绝对避免
transition-delay用于交互反馈——它不是“等半秒再动”，而是让浏览器延迟监听变化；鼠标快速进出时极易丢帧或反向执行 - 移动端慎用
hover触发：iOS Safari 对伪类支持不稳定，优先用:active或 JS 添加 class 控制
最易被忽略的一点：过渡是否启用 GPU 加速，不取决于你写了 transform，而取决于浏览器是否真把它当层处理。如果元素有频繁重绘（比如父容器 overflow: hidden 被裁剪），或同时设置了 filter: blur()，transform 过渡也可能掉帧。上线前务必在真机上滚动+悬停测试两轮。
