position 属性本身不可动画，需通过 top/left 或 transform 等可过渡属性实现位移；推荐优先使用 transform（如 translateX），配合明确的 transition 声明，避免 forced layout 和 all 过渡导致的性能问题。
transition 无法触发 position 变化动画？
直接修改 position 的值（比如从 static 改成 relative）不会触发动画，因为 position 本身不是可过渡的 CSS 属性。真正能做平滑过渡的是它的“表现结果”，比如 top、left、transform 这类影响布局或渲染的属性。
-
top/left/right/bottom需要元素已设position: relative、absolute或fixed才生效，且会触发回流，性能较差 -
transform: translateX()不影响文档流，不触发回流，推荐优先使用 - 若用
margin或padding模拟位移，虽可过渡，但可能意外撑开父容器或影响其他元素布局
用 transform 实现位置平滑移动的最小配置
这是目前最稳定、兼容性好（IE10+）、性能高的做法。关键在于：只动 transform，配合 transition 声明要过渡的属性和时长。
div.movable {
transition: transform 0.3s ease-out;
}
div.movable.shifted {
transform: translateX(100px) translateY(-20px);
}
- 必须显式写
transform的完整值（不能只写translateX(100px)而漏掉translateY，否则会覆盖原有变换） - 避免混用
top和transform，浏览器可能无法正确插值，导致跳变 - 如果元素原本有旋转或缩放，
transform: translateX()会清空它们——要用transform: translateX() translateY() rotate() scale()合并写
JavaScript 触发位移动画时的常见卡顿点
用 JS 切换 class 或设置 style.transform 时，若操作时机不对，容易掉帧。核心是避开强制同步布局（forced layout）。
- 不要在同一个 tick 里先读
offsetTop/getBoundingClientRect()，再改transform；浏览器会立即计算旧布局，打断动画流水线 - 改完样式后，如需后续操作，用
requestAnimationFrame延迟到下一帧 - 对频繁触发的位移（如拖拽），加节流或用
will-change: transform提前提示浏览器提升图层（但别滥用，可能增加内存）
定位变化伴随尺寸/透明度联动？注意 transition-property
如果同时动位置、宽高、透明度，别写 transition: all 0.3s —— 它会让所有可动画属性都参与，包括你没打算动的 box-shadow、color 等，可能引发意外过渡或性能抖动。
立即学习“前端免费学习笔记（深入）”；
- 明确列出需要过渡的属性：
transition: transform 0.3s, opacity 0.3s, width 0.3s - 不同属性可以配不同缓动函数：
transition: transform 0.3s cubic-bezier(0.2, 0.8, 0.4, 1), opacity 0.2s linear - 若某次只更新
transform，但transition里写了all，浏览器仍会尝试对未变属性做“从 A 到 A”的过渡，白白消耗资源
position 当作可动画属性去写 transition，以及在 JS 中一边读布局一边写样式。这两处一旦出错，动画就不是“不平滑”，而是根本不动或闪一下。 
