直接给top或left加transition没反应，是因为浏览器未触发布局重排而将其优化掉；需确保父容器设position:relative、top/left为具体数值、避免top与bottom等对立属性共存。
为什么直接给 top 或 left 加 transition 没反应
不是写法错了，而是浏览器压根没把它当可动画属性处理——前提是该元素没触发布局重排，而现代浏览器常把它优化掉。常见诱因包括：
• 父容器没设 position: relative（或 absolute/fixed），导致 top/left 计算基准漂移
• 初始值是 auto 或未声明，浏览器无法插值
• 同时设置了 top 和 bottom（或 left 和
），CSS 层叠冲突直接抑制动画<br>• <code>transition被更高优先级规则覆盖，比如内联样式写了
transition: none
用 transform 替代 top/left 是更稳的选择
transform: translateX() 和 translateY() 不触发重排，GPU 可加速，移动端也顺滑。尤其适合轮播图、弹窗位移、点击缩放等高频场景。
• 必须在基础样式中显式写 transform: translate(0, 0)，否则首次变化会跳变
• 把 top: 20px; left: 30px; 改成 transform: translate(30px, 20px)
• transition 改为作用于 transform：例如 transition: transform 0.3s ease
• 注意：transform 是相对自身原点位移，不影响文档流，也不影响其他元素布局
• 如果 JS 需要读取“真实位置”，别用 offsetTop，改用 getBoundingClientRect()
transition 必须写在基础选择器里，否则只进不出
这是最容易被忽略的规则：如果只在 :hover 或 .active 中写 transition，鼠标移出或 class 移除瞬间就会跳变，不是 bug，是机制如此。
• 正确写法：基础规则中声明 transition，状态里只改目标值
• 示例：
.box {<br> position: absolute;<br> transform: translate(0, 0);<br> transition: transform 0.25s cubic-bezier(0.4, 0, 0.2, 1);<br>}<br>.box.shifted {<br> transform: translate(100px, 50px);<br>}• 别用
transition: all 0.3s：z-index、box-shadow 等意外参与过渡，调试时极难定位• 多个属性不同节奏？拆开写：
transition-property: opacity, transform; + transition-duration: 0.2s, 0.25s;
哪些属性真能被 transition 动画化
不是所有 CSS 属性都支持插值计算。
• ✅ 安全首选：opacity、transform（性能最好）、background-color、color
• ⚠️ 可用但慎用：width、height、margin、padding——触发布局重排，容易卡顿
• ❌ 完全无效：display、visibility、position、z-index、font-size（虽部分浏览器支持，但易引发重排）
• 颜色值要类型一致：从 rgb(255,0,0) 到 rgba(255,0,0,0.5) 可以；但 #ff0000 到 transparent 在某些浏览器可能不插值
立即学习“前端免费学习笔记（深入）”；
绝对定位本身不阻止动画，真正卡住的是你选的属性和写法。只要避开top/left 的隐式依赖、坚持用 transform + 显式 transition 声明、并在基础规则里写死过渡逻辑，90% 的“没动画”问题就消失了。 
