transition没生效通常因三点：属性起止值不可计算（如auto）、变更属性不支持过渡（如display）、未触发重排/重绘；响应式中需将transition声明于基础选择器而非媒体查询内。
transition 为什么没生效？检查这三点
最常见的“写了 transition 却没动画”问题，基本卡在这三个地方：
• transition 写在了初始状态（比如 .box），但触发变化的属性（比如 width、opacity）在 hover 或 class 切换时被重置为 auto 或 unset —— 浏览器无法计算起止值，直接跳变
• 变更的属性本身不支持过渡，比如 display、height: auto、font-size: clamp() 中的动态部分
• 没有触发重排/重绘，例如只改了 transform 但父容器用了 will-change: transform 却没设初始值，或 CSS 层叠导致样式未真正应用
响应式断点里用 transition 要避开媒体查询陷阱
媒体查询本身不触发 transition；它只是切换整套规则。想让宽度随屏幕缩放平滑过渡，不能靠 @media (max-width: 768px) 里分别写 transition: width 0.3s —— 这只会让该断点下的后续状态变化有动画，不是断点切换本身。
正确做法是把可过渡属性（如 width、padding、opacity）从媒体查询中“抽出来”，统一声明在基础选择器上：
.card {
width: 300px;
transition: width 0.35s ease, opacity 0.2s;
}
@media (min-width: 768px) {
.card { width: 480px; }
}
@media (min-width: 1024px) {
.card { width: 640px; }
}
这样浏览器在断点跨越时，会自然插值计算中间帧。
立即学习“前端免费学习笔记（深入）”；
移动端 touch 触发 transition 的延迟问题
iOS Safari 和部分安卓 WebView 在 :hover 上有约 300ms 延迟（为双击缩放留余地），导致 hover transition 看起来卡顿或不响应。
解决方案不是禁用 touch-action，而是绕开 :hover：
- 用
:active配合transition做按下反馈（注意：仅限即时交互，不适用于悬停展开） - 对需要悬停效果的组件，改用 JS 监听
touchstart/touchend切换 class，再让 class 控制过渡属性 - 关键路径避免依赖
:hover做布局变化，比如导航菜单展开，优先用点击 toggle +max-height过渡
transition 性能敏感项：哪些值真能硬件加速
不是所有带 transition 的属性都跑在合成层。只有 transform 和 opacity 能稳定触发 GPU 加速；其他如 left、top、width 会频繁触发 layout，尤其在响应式频繁 resize 时容易掉帧。
优化建议：
- 用
transform: scale()替代width/height缩放容器 - 用
transform: translateX()替代margin-left做位移 - 如果必须动
background-color，确保它不在大尺寸滚动区域上，否则 repaint 成本高 - 慎用
transition: all—— 它会让所有可动画属性都参与，包括你没意识到正在变化的box-shadow或filter
复杂响应式组件里，最常被忽略的是 transition-timing-function 对感知流畅度的影响：用 cubic-bezier(0.25, 0.46, 0.45, 0.94)（即 ease-in-out 的强化版）比默认 ease 更自然，尤其在快速视口切换时。
