正确做法是将旋转和缩放统一通过transform属性设置，并使用transition: transform实现同步过渡，避免因单独控制rotate或scale导致的动画卡顿或跳帧问题。

在使用 CSS 实现元素的旋转和缩放同时过渡时，如果动画出现卡顿、跳帧或行为异常，通常是因为 transition 属性设置不当或对 transform 的多个函数处理不统一。通过合理组合 transition 和 transform，可以实现平滑自然的动画效果。

问题原因：transition 分开写导致动画不同步

常见错误是为 rotate 和 scale 单独设置过渡：

但 rotate 和 scale 并不是标准的独立 CSS 属性，它们属于 transform 函数。浏览器无法单独追踪它们的变化，导致动画失效或突变。

正确做法：统一使用 transform + transition

将旋转和缩放都写在 transform 中，并对 transform 整体设置过渡：

这样浏览器会把整个 transform 视为一个可过渡的值，内部的旋转和缩放会同步平滑变化。

优化动画体验的小技巧

• 使用 ease-in-out 等缓动函数：让动画起始和结束更自然，避免生硬。
• 避免频繁触发重排：transform 属于合成属性，不会影响布局，性能更好。
• 设置 transform-origin（如需要）：控制旋转中心点，比如 transform-origin: center center;。
• 结合 will-change 提示浏览器：若动画频繁，可加 will-change: transform; 提前优化。

基本上就这些。只要把所有形变操作集中到 transform，再统一用 transition: transform 控制过渡，就能避免旋转缩放同时进行时的动画异常。不复杂但容易忽略细节。