position变更时动画不触发，应改用transform替代top/left；absolute+transition在display/visibility切换时失效，需用opacity+transform过渡；keyframes不可动画position值，须固定定位类型；避免layout触发，优先动画transform/opacity。
position 变更时动画不触发？用 transform 替代 top/left
直接修改 top、left 等定位属性本身不会触发动画，除非元素已设置 position: relative/absolute/fixed 且声明了 transition。但更可靠的方式是放弃 top/left，改用 transform: translate() —— 它天生支持硬件加速，动画更流畅，且无需依赖定位类型。
- 错误写法：
element.style.top = '100px';（即使有transition: top 0.3s，也可能卡顿或失效） - 推荐写法：
element.style.transform = 'translateY(100px)';（搭配transition: transform 0.3s ease稳定生效） - 注意：
transform的值是叠加的，多次设置会覆盖而非累加，需手动计算或用getComputedStyle读取当前值
absolute 定位 + transition 动画的常见失效场景
当元素从 display: none 切换为 display: block，或从 visibility: hidden 变为 visible 时，transition 不会作用于初始位置变化——因为元素在显示瞬间才被渲染，浏览器跳过了中间帧。
- 解决方案：先设
opacity: 0; visibility: visible;，再通过transition控制opacity和transform，避免依赖 display/visibility 切换 - 若必须用
position: absolute移动，确保起始和结束状态都处于文档流中（即不被display: none中断） - 慎用
left: auto或right: 0等动态计算值，它们可能在动画中被强制重排，导致卡顿
keyframes 动画中控制 position 类型切换的问题
CSS @keyframes 无法在动画过程中切换 position 值（如从 static 到 absolute），因为 position 不是可动画属性。浏览器会忽略该属性在关键帧中的变化，只取首尾帧中实际生效的值。
- 表现现象：元素在动画开始/结束时突然“跳”到新位置，中间无过渡
- 替代方案：保持
position: absolute（或 fixed）不变，仅用transform或top/left（配合 transition）做位移 - 如需响应式定位逻辑（例如从居中变为右对齐），应在 JS 中预判并提前设置好定位基准（如
left: 50%→right: 20px），再触发 transform 动画
动画性能陷阱：避免 layout 触发与频繁重排
使用 top/left 配合 position: absolute 会频繁触发 layout 计算，尤其在滚动或高频动画中明显掉帧；而 transform 和 opacity 属于合成属性，由 GPU 直接处理。
立即学习“前端免费学习笔记（深入）”；
- 检查工具：Chrome DevTools → Rendering → “Paint flashing” 和 “Layout Shift Regions” 可直观看到重排区域
- 安全组合：仅对
transform、opacity、filter做动画；避免同时操作width、height、margin、padding - 必要时加
will-change: transform;（但不要滥用，仅在动画前临时设置，结束后清除）
element.style.willChange = 'transform';
setTimeout(() => {
element.style.transform = 'translateX(200px)';
element.style.willChange = 'auto';
}, 10);
CSS 动画与定位真正难的不是写法，而是判断「哪部分该由定位决定初始上下文，哪部分该交给 transform 做中间过渡」——混用二者又不加隔离，最容易在复杂布局中引发不可预测的偏移和闪烁。 
