用 relative 还是 absolute 取决于动画起点是否依赖文档流：relative 元素占位、适合“原地出发”，absolute 脱离流、需父容器定位，适合“固定区域飞入”；常见错误是父容器未设定位导致 absolute 错位。
position 用 relative 还是 absolute？看动画起点是否依赖文档流
用 position: relative 时，元素仍占原文档流位置，位移不影响其他元素；用 position: absolute 后，元素脱离流，父容器必须设 position: relative 或 absolute 才能以它为参考系。动画起点若需“原地出发再滑走”，选 relative；若要“从屏幕某固定区域飞入”，比如右上角通知，就得用 absolute 配合 top/right 定位。
常见错误：父容器没设定位，absolute 子元素直接相对 定位，一滚动就错位。
- 移动端慎用
position: fixed做动画起点——iOS Safari 滚动时会闪烁或卡顿 -
transform: translate()比直接改left/top更高效，但前提是定位方式允许（relative和absolute都支持） - 如果动画中要切换定位类型（比如 hover 时从
relative切到absolute），浏览器会强制重排，导致卡顿
transition 要写在哪个元素上？写在被移动的元素本身
动画效果由 transition 触发，但它必须写在「状态将要变化的元素」上，而不是父容器或触发按钮。比如点击按钮让盒子右移，transition: transform 0.3s ease 得写在盒子的 CSS 里，不是按钮上。
容易踩的坑：只写了 transition，却忘了定义初始和结束状态的差异。例如只有 transition: left 0.3s，但没在 :hover 或 class 里改 left 值，动画根本不会动。
立即学习“前端免费学习笔记（深入）”；
- 推荐用
transform（如translateX(100px)）代替left/top，避免触发重排，尤其在频繁交互场景 - 不要写
transition: all 0.3s—— 字体、阴影、颜色等无关属性也会参与过渡，可能引发意外动画或性能抖动 - 想让入场和离场用不同缓动？得分开写两个 class，用 JS 切换，CSS 本身不支持单属性双向不同 timing-function
动画卡顿或闪一下？检查 will-change 和 GPU 加速边界
哪怕用了 transform，复杂页面中仍可能掉帧。这时候加 will-change: transform 是个信号，告诉浏览器“这个元素即将动”，提前分配图层。但它不是万能药——滥用会导致内存占用升高，尤其在列表项上批量加，反而更卡。
真实表现取决于浏览器是否真正启用了 GPU 合成。Chrome DevTools 的 Layers 面板能验证：动起来的元素旁边有没有独立图层小图标。
- 只对确实需要动画的元素加
will-change，动画结束建议用 JS 移除该属性 -
opacity动画天然触发 GPU 合成，比transform更轻量，适合淡入淡出类交互 - 避免在
transform中混用百分比单位（如translateX(50%)）和视口单位（如vh），某些安卓 WebView 会计算失准导致偏移
JavaScript 控制 CSS 动画时，classList.toggle 比 style.xx = 更稳
用 JS 改 element.style.transform = 'translateX(200px)' 看似直接，但一旦 CSS 里有媒体查询或其它 class 覆盖了这个内联样式，逻辑就不可控。更可靠的方式是预设好动画 class，用 element.classList.toggle('is-moving') 来开关。
注意：class 切换后动画不一定立刻执行。如果目标元素刚插入 DOM，或 class 变化前后样式无实质差异（比如都为空），浏览器可能跳过重绘。此时可加一句 void element.offsetWidth 强制触发重排，确保下一帧能捕获状态变更。
- 避免在循环里高频调用
classList.toggle，比如 scroll 事件中——节流或用IntersectionObserver替代 - 需要链式动画（先移入、再缩放）？别堆多个 class，用
@keyframes写完整序列，JS 只负责添加一次 class - 动画结束后想清理状态？监听
transitionend事件，但注意它会在每个过渡属性上都触发一次，需用event.propertyName === 'transform'过滤
transform，得进 DevTools 看 Layers；还有就是 JS 控制时，class 切换和浏览器渲染时机之间那点微妙的空隙，不处理好，动画就断在第一帧。 
