用 position: fixed 居中时动画偏移，是因为仅设 top: 50%; left: 50% 会使元素左上角对齐视口中心，必须配合 transform: translate(-50%, -50%) 实现真正居中；动画应优先使用 transform 和 opacity 避免重排，旧浏览器需降级为 margin: auto 或 Flex 布局，显隐控制需结合最小展示时间与平滑过渡。
用 position: fixed 居中时，为什么动画总偏移？
因为 fixed 是相对于视口定位，但很多人直接写 top: 50%; left: 50%，结果元素左上角落在中心，而不是自身居中——这是最常踩的坑。
- 必须配合
transform: translate(-50%, -50%)把自身回拉一半宽高 - 不加
transform或只加一个方向，都会导致错位 - 如果动画元素宽高不固定（比如内容动态），优先设
width/height或用min-width/min-height防止抖动
CSS 加载动画本身要不要用 @keyframes？
要，但关键不是“有没有”，而是“怎么写才不卡”。浏览器对 transform 和 opacity 的动画优化最好，其他属性（如 width、background-position）容易触发重排或低帧率。
- 旋转动画优先用
transform: rotate()，别用animation: spin 1s infinite linear然后在@keyframes里写transform: rotate(360deg) - 避免在
@keyframes中修改top/left，这会让浏览器放弃合成层优化 - 简单旋转 + 透明度脉冲就够用：比如
@keyframes loading { 0% { transform: rotate(0); opacity: 0.6; } 100% { transform: rotate(360deg); opacity: 1; } }
IE11 或旧版 Safari 下 fixed 居中失效怎么办？
旧浏览器对 transform 的 translate 支持不一致，特别是 IE11 对 transform: translate(-50%, -50%) 在 fixed 元素上渲染异常。
- 降级方案：改用
top: 0; bottom: 0; left: 0; right: 0; margin: auto;，但要求元素有明确宽高 - 更稳的写法是加前缀：
-webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%); - 如果项目还需兼容 IE，建议直接用 Flex 布局容器包裹，把加载动画放进一个
position: fixed的全屏遮罩层里，再用display: flex; align-items: center; justify-content: center
加载动画显示/隐藏的切换逻辑该放哪？
别只靠 CSS 类控制显隐，JS 控制时机更重要。常见错误是请求一发就立刻 show，结果接口飞快返回，动画一闪而过；或者 hide 太早，接口还没真正完成。
立即学习“前端免费学习笔记（深入）”；
- show 动画：应在发起请求前或请求 pending 状态确认后立即添加类，比如
loadingEl.classList.add('show') - hide 动画：必须等响应成功/失败回调里执行，且建议加个最小展示时间（如 300ms），避免“闪一下就没了”
- 避免用
display: none切换，改用visibility: hidden+opacity: 0配合 transition，让隐藏过程平滑
