17370845950

必须将 rotate 和 scale 写在同一 transform 中用单个 @keyframes 控制，因 transform 是复合属性，分拆动画会覆盖导致不同步；函数顺序影响变换逻辑，推荐先 rotate 后 scale，并避免与 transition 混用。

当 CSS 元素同时做旋转（rotate）和缩放（scale）动画时，如果用多个独立的动画（比如分别给 transform: rotate() 和 transform: scale() 写不同 animation），浏览器会因 transform 覆盖导致行为不协调——后声明的动画会覆盖前一个，最终只执行最后一个 transform 值。

必须把 rotate 和 scale 写在同一个 transform 里

transform 是一个复合属性，不能像 color 或 opacity 那样分拆动画。每次设置 transform，都会完整替换整个变换矩阵。所以：

• ❌ 错误：分别写 animation: spin 2s, zoom 2s; 并在 @keyframes 中各自只改 rotate 或 scale
• ✅ 正确：只定义一个 animation，所有变换统一在同一个 @keyframes 中通过 transform: rotate(...) scale(...) 组合写出

用单个 @keyframes 精确控制每帧的组合效果

例如实现「先放大再旋转」或「同步缩放+旋转」，关键是在每个 keyframe 里手动写出完整的 transform 值：

@keyframes spinAndGrow {
  0%   { transform: rotate(0deg) scale(1); }
  50%  { transform: rotate(180deg) scale(1.3); }
  100% { transform: rotate(360deg) scale(1); }
}

这样浏览器每一帧都计算一个完整的变换矩阵，旋转与缩放自然同步，不会错位或跳变。

注意 transform 函数的顺序影响结果

transform 函数的书写顺序决定数学运算顺序（从右往左应用）。例如：

• transform: scale(1.5) rotate(45deg); → 先旋转，再缩放（缩放作用于已旋转的坐标系）
• transform: rotate(45deg) scale(1.5); → 先缩放，再旋转（旋转中心被放大后偏移）

多数情况下推荐 先 rotate 后 scale，更符合直觉；若需绕原点稳定旋转，可加 transform-origin: center; 统一基准点。

避免用 transition 混搭 transform 动画

如果元素既有 hover 的 transition: transform 0.3s，又叠加了 animation，两者会竞争 transform 值，极易冲突。建议：

• 纯动画场景：只用 animation + @keyframes，禁用相关 transition
• 交互触发动画：用 JS 切换 class 触发动画，而非依赖 transition 自动补间
• 需要过渡效果：把入场/退出逻辑也写进 keyframes（如 0%→10% 启动，90%→100% 收尾）

不复杂但容易忽略：transform 动画协调性的核心，就是“不拆、不混、不抢”——所有变换写一起，用一套 keyframes 控制，让浏览器算一次到位。