正确做法是将居中与动画分离：flex居中时动画直接作用于子元素；绝对定位居中时transform需复合书写，包含translate和rotate；必须设置transform-origin并启用硬件加速。
给居中元素加旋转动画，别直接 animating transform: translate
想让一个已经居中的元素（比如用 flex 或 text-align: center 居中的图片）动起来，最常见错误是直接在它身上写 animation: spin 2s infinite，结果发现旋转中心偏了、抖动、甚至整个居中失效。原因在于：动画会覆盖原有 transform 值，而居中用的 translate(-50%, -50%) 或 flex 的布局逻辑不参与动画计算。
正确做法是把动画和居中逻辑分开——居中靠布局，动画靠独立 transform 叠加：
- 如果用
flex居中，动画直接加在子元素上：transform: rotate(45deg)不影响 flex 对齐 - 如果用绝对定位 +
translate(-50%, -50%)居中，动画必须写成复合值：transform: translate(-50%, -50%) rotate(45deg)，不能只写rotate - 避免对父容器做动画（比如给
.container加rotate），否则整个居中结构跟着转，子元素相对位置乱掉
用 @keyframes 实现平滑缩放+旋转居中动画
很多需求不只是转一圈，而是“从无到有”地弹出并旋转居中——比如模态框入场、加载图标浮现。这时不能只依赖静态居中，得靠动画控制全过程。
关键点：动画起始帧要匹配居中所需的最终布局状态，否则第一帧就错位。
立即学习“前端免费学习笔记（深入）”；
生成Claude风格的精美单页HTML汇报文件。当用户需要生成"汇报"、"周报"、"月报"、"项目进度"、"复盘"、"演示"、"slide deck"、"状态报告"、"工作总结"时触发。支持6种模板：周报(weekly)、项目进度(project)、月度总结(monthly)、复盘报告(postmortem)、演示文稿(slid
- 用
flex容器时，动画只需作用于子元素，起始scale(0)、rotate(0)，结束scale(1)、rotate(360deg) - 用绝对定位时，
@keyframes必须包含完整transform：from { transform: translate(-50%, -50%) scale(0) rotate(0); } - 别漏掉
transform-origin: 50% 50%—— 否则旋转中心可能偏移到左上角，尤其在没设宽高的元素上
居中动画卡顿或模糊？检查硬件加速是否启用
旋转类动画最容易出现边缘锯齿、掉帧，尤其在 Chrome 和 Safari 上。这不是代码写错了，而是浏览器默认用 CPU 渲染 sub-pixel 变换。
强制 GPU 渲染能立刻改善，但要注意加的位置：
- 只加在需要动画的元素上，不要给父容器加：
transform: rotate(10deg) translateZ(0) -
translateZ(0)比translate3d(0,0,0)更轻量，够用 - 如果元素含文字，再加
backface-visibility: hidden减少重绘抖动 - 别在所有动画元素上无差别加——过多 3D 提升会吃显存，移动端尤其敏感
Flex 居中下做位移动画，为什么 margin-left 不生效
有人想让 flex 居中的元素左右晃动，写了 animation: shake 0.5s; 并在 keyframes 里设 margin-left: 10px，结果没反应。这是因为 margin 在 flex 容器里被 layout 引擎忽略——flex 子项的定位由 justify-content 和 align-items 控制，外部 margin 不参与对齐计算。
想实现位移，只能走 transform 路线：
- 用
transform: translateX(10px)替代margin-left - 如果同时要旋转+平移，写成
transform: translateX(10px) rotate(5deg)，顺序不影响结果 - 注意：
transform是相对于元素自身坐标系，不是父容器，所以不会破坏 flex 居中基准
transform 值必须合并书写，不能拆成多个声明。 
