页面中的加载图标经常需要同时执行旋转与缩放，但不少开发者在实现时发现：动画要么只转不缩放，要么鼠标悬停后缩放突然让旋转重置，甚至出现中心点漂移。这类异常通常不是浏览器渲染错误，而是 CSS 中 transform 属性只有一个，所有变换函数都必须写在同一个声明里。只要先在 animation 关键帧中把 rotate 和 scale 组合好，再统一设置 transform-origin，就能避免大部分问题。
一、为什么同时旋转缩放容易出问题
CSS 的 transform 是一个单值复合属性，rotate()、scale()、translate() 这些函数最终会合并成一个 transform 值作用在元素上。它不像 color 和 background 那样可以各自独立声明互不影响。如果你在 animation 关键帧里写了 transform: rotate(360deg)，又在 :hover 选择器里写了 transform: scale(1.2)，后出现的规则会根据 CSS 级联顺序覆盖前者。动画运行期间，animation 产生的 transform 优先级高于普通样式，所以 hover 缩放往往不会生效；而一旦动画暂停或被移除，旋转又立刻丢失，看起来就像动画异常。
常见的错误写法是把旋转和缩放拆到两个地方处理，例如下面这段代码：
/* 错误示范：旋转和缩放分别定义 */
.icon {
animation: spin 2s linear infinite;
}
.icon:hover {
transform: scale(1.2);
}
@keyframes spin {
from { transform: rotate(0deg); }
to { transform: rotate(360deg); }
}
这段代码的实际表现是：鼠标悬停时 scale(1.2) 被 animation 的 transform 覆盖，元素继续旋转但不会放大；如果 animation 被暂停，元素会瞬间放大，但旋转角度不会保持。要解决这个问题，就必须把 rotate 和 scale 写到同一条 transform 声明中，并让关键帧完整描述每一帧的组合状态。
另一个容易忽略的点是 transform-origin。默认情况下旋转和缩放都围绕元素中心进行，但如果之前为了某个效果把 transform-origin 改成了左上角或某个具体像素，旋转轨迹就会偏离视觉中心，和缩放叠加后看起来像是动画跳动。因此在组合动画前，最好显式设置 transform-origin: center，避免继承到意外的中心点。
二、使用 animation 关键帧组合 rotate 与 scale
正确做法是在 keyframes 的每个阶段同时声明 rotate 和 scale，让浏览器知道每一帧的完整变换状态。下面是一个旋转一周并伴随缩放起伏的加载动画示例：
/* 正确示范：旋转与缩放组合在同一个 keyframes */
.loader {
width: 60px;
height: 60px;
border-radius: 50%;
background: #4f7cff;
animation: spin-scale 2s ease-in-out infinite;
transform-origin: center;
}
@keyframes spin-scale {
0% {
transform: rotate(0deg) scale(1);
}
25% {
transform: rotate(90deg) scale(1.1);
}
50% {
transform: rotate(180deg) scale(0.95);
}
75% {
transform: rotate(270deg) scale(1.15);
}
100% {
transform: rotate(360deg) scale(1);
}
}
这样每一帧的 rotate 和 scale 都不会互相覆盖，动画会沿着关键帧定义的路径平滑过渡。注意 transform 中函数顺序会影响最终外观：先 rotate 再 scale 与先 scale 再 rotate，在中心点重合时视觉差异很小，但如果元素带有偏移或 transform-origin 不在中心，顺序就会改变几何结果。一般建议按照 translate、rotate、scale 的顺序书写，这样更符合直觉，也更易于调试。
如果希望旋转和缩放分别由不同条件控制，可以使用 CSS 自定义属性配合 @property 注册类型来实现。例如让动画只更新角度变量，悬停时修改缩放变量，两者互不干扰：
@property --angle {
syntax: '<angle>';
initial-value: 0deg;
inherits: false;
}
@property --scale {
syntax: '<number>';
initial-value: 1;
inherits: false;
}
.icon {
transform: rotate(var(--angle)) scale(var(--scale));
animation: spin 2s linear infinite;
transition: --scale 0.3s ease;
}
.icon:hover {
--scale: 1.2;
}
@keyframes spin {
from { --angle: 0deg; }
to { --angle: 360deg; }
}
这种方式把 rotate 和 scale 解耦，动画只改变 --angle，hover 只改变 --scale，transform 始终读取两个变量的组合值，从根源上避免了覆盖问题。不过 @property 需要较新版本的浏览器支持，在老旧环境中可以退回使用关键帧组合方案。
三、除了覆盖之外还需注意的细节
动画结束后元素回到初始状态，也经常被误认为异常。如果希望动画停在最后一帧，需要显式设置 animation-fill-mode: forwards。但要注意，forwards 保持的是最后一个关键帧的 transform 值，如果后续还需要 hover 缩放，仍然要通过组合变量或分层方式处理，否则 hover 的 transform 会被 fill-mode 保留的 transform 覆盖。
性能方面，旋转和缩放都属于合成层操作，浏览器理论上可以做 GPU 加速。但如果动画元素同时修改了 width、height 或 left、top 等布局属性，就会触发重排和重绘，导致掉帧。建议在动画元素上声明 will-change: transform，提前提升到独立合成层。不过 will-change 不适合大量使用，只对持续动画的少量元素开启即可，过多使用会占用显存。
当元素上同时存在 transition 和 animation 时，如果两者都作用于 transform，也会造成混乱。一个常见的错误是给元素写 transition: transform 0.3s，同时又让它执行 transform 动画。动画的每一帧变化会触发 transition，导致动画被拖慢或跳动。正确的做法是：要么只用 animation，要么只用 transition 处理 hover 反馈，不要在同一个元素的 transform 上混用两种机制。
四、完整示例与调试建议
下面给出一个可以直接运行的组合动画示例。HTML 结构只需要一个容器元素：
<div class="loader"></div>
对应的样式如下，旋转和缩放同时进行，并且通过 hover 暂停动画并保持当前状态：
.loader {
width: 70px;
height: 70px;
border: 6px solid #e0e0e0;
border-top-color: #4f7cff;
border-radius: 50%;
animation: rotate-scale 1.8s ease-in-out infinite;
transform-origin: center;
will-change: transform;
}
.loader:hover {
animation-play-state: paused;
}
@keyframes rotate-scale {
0% {
transform: rotate(0deg) scale(1);
}
50% {
transform: rotate(180deg) scale(1.15);
}
100% {
transform: rotate(360deg) scale(1);
}
}
调试时可以先打开浏览器开发者工具的 Animations 面板，观察关键帧之间的插值是否平滑。如果发现缩放没有生效，检查 computed 面板里的 transform 最终值，确认是否被其他规则覆盖。还可以临时把动画暂停，手动修改 transform 属性来定位问题来源。遇到中心点偏移时，优先检查 transform-origin 是否被继承或覆盖，通常显式设置 center 就能恢复。
如果旋转和缩放的节奏差异很大，比如旋转很快、缩放很慢，也可以把动画拆分到父子元素上：父元素只负责 rotate，子元素只负责 scale。这样两个动画各自独立，互不干扰，也更容易维护。但需要注意父子层级的 transform 会相乘，若子元素自身还有定位偏移，要先把 transform-origin 对齐到同一中心。
总体来说，解决 CSS 旋转缩放同时动画异常的关键，是意识到 transform 只有一个值。把 rotate、scale 等函数写进同一条声明，配合 animation 关键帧完整描述每一帧，再统一 transform-origin，就能避免绝大多数覆盖和跳动问题。对于更复杂的交互，可以借助 CSS 自定义属性或父子分层方案，让旋转和缩放各自独立控制。