CSS transition 无动画的根本原因是属性不支持过渡，需用 opacity/visibility 替代 display、max-height 替代 height:auto；优先使用 transform 而非 top/left 以避免重排；transition 必须写在基础选择器中且属性名一致；transform-origin 需与 transform 同元素设置。
transition 触发条件不满足导致无动画
很多情况下写好了 transition 却没效果，根本原因是 CSS 属性没发生「可过渡变化」。比如从 display: none 切到 block，浏览器直接跳变，因为 display 不支持过渡。同理，height: auto 也无法过渡——浏览器不知道目标高度是多少。
解决办法是改用支持过渡的属性：
- 用
opacity+visibility替代display - 用
max-height（设一个足够大的固定值，如max-height: 500px）替代height: auto - 所有过渡必须基于「数值型属性」：如
transform、opacity、margin、padding、font-size等
transform 比 top/left 更适合做位移动画
用 top 或 left 移动元素会触发重排（layout），而 transform: translateX() 只触发重绘（paint）甚至合成（composite），性能高得多，尤其在移动端。
常见错误写法：
.menu { transition: left 0.3s ease; }<br>.menu.open { left: 200px; }
立即学习“前端免费学习笔记（深入）”；
推荐写法：
.menu { transition: transform 0.3s ease; }<br>.menu.open { transform: translateX(200px); }
-
transform还支持硬件加速（加will-change: transform可进一步提示浏览器） - 避免混用
transform和top，否则可能覆盖或失效 - 响应式中常配合媒体查询切换
translateX(0)↔translateX(-100%)实现侧边栏滑入
@media 中 transition 要写在基础选择器里，别只写在断点内
如果只在 @media (max-width: 768px) 里写 transition，那桌面端切换到小屏时，属性变化没有过渡——因为过渡声明还没生效。
正确做法是把 transition 提到默认样式中：
.header {<br> transition: transform 0.35s cubic-bezier(0.34, 1.56, 0.64, 1);<br>}<br><br>@media (max-width: 768px) {<br> .header.mobile-active {<br> transform: translateY(-100%);<br> }<br>}
- 贝塞尔曲线
cubic-bezier(0.34, 1.56, 0.64, 1)比ease-in-out更自然，适合菜单收起 - 不要在不同断点里重复写
transition，除非要差异化时长/缓动 - 过渡属性名必须完全一致（如写了
transition: opacity 0.2s，就不能靠transform触发动画）
transform-origin 影响旋转/缩放的锚点位置
响应式下做折叠面板或汉堡菜单图标动画（如三横线转叉号），经常要用 transform: rotate()，但默认以元素中心旋转，容易偏移。这时得用 transform-origin 控制支点。
例如汉堡图标三条杠每条单独旋转成叉号：
.hamburger span {<br> display: block;<br> width: 24px;<br> height: 2px;<br> background: #333;<br> transition: transform 0.3s ease, opacity 0.3s ease;<br> transform-origin: center;<br>}<br><br>.hamburger.active span:nth-child(1) {<br> transform: rotate(45deg) translate(4px, 4px);<br>}<br>.hamburger.active span:nth-child(2) {<br> opacity: 0;<br>}<br>.hamburger.active span:nth-child(3) {<br> transform: rotate(-45deg) translate(4px, -4px);<br>}
-
transform-origin: center是默认值，但有时需要left center或top left来对齐 - 注意：
transform-origin必须和transform在同一元素上生效，父容器设了没用 - 缩放类动画（如
scale(0.95)）若没设transform-origin，可能看起来像在抖动
transition，而在于选对了可过渡属性、避开了重排陷阱、并在所有视口下都保持声明有效。最易被忽略的是：动画触发前元素是否已渲染、是否有隐藏层级（z-index 或 overflow 截断）、以及 transform 是否意外被其他规则覆盖。 
