使用 CSS 实现缩放动画：变换顺序很重要……有时
💡
原文中文，约4300字，阅读约需11分钟。
📝
内容提要
在使用 CSS 实现缩放动画时，变换顺序非常重要。将 translate 放在前面可以避免 scale 作为其乘数，从而实现更自然的动画效果。通过调整 transform 属性的顺序和使用 calc 函数，可以获得理想的动画表现。
🎯
关键要点
-
使用 CSS 实现缩放动画时，变换顺序非常重要。
-
将 translate 放在前面可以避免 scale 作为其乘数，从而实现更自然的动画效果。
-
CSS 规范中的算法会对变换进行线性插值，导致 scale 和 translate 的顺序影响动画效果。
-
通过手动将 translate 值乘以 scale 值，可以实现更平滑的动画效果。
-
使用 calc 函数可以在开发者工具中更方便地调整 transform 属性。
-
将初始变换设置为 rotate(0) 可以在某些情况下“修复”动画，但不建议使用这种方法。
-
使用 perspective 属性和 3D 变换可以实现物体朝相机移动的效果，而不是简单的缩放。
-
透视效果使得远处和近处物体的视觉变化不同，因此需要使用不同的变换方法。
❓
延伸问答
为什么变换顺序在 CSS 动画中很重要？
变换顺序影响动画效果，错误的顺序会导致不自然的动画表现，例如产生'俯冲'效果。
如何避免 scale 作为 translate 的乘数？
可以将 translate 放在前面，或者手动将 translate 值乘以 scale 值。
使用 calc 函数有什么好处？
使用 calc 函数可以更方便地调整 transform 属性，保持动画效果的平滑性。
如何通过 CSS 实现物体朝相机移动的效果？
可以使用 perspective 属性结合 3D 变换来实现物体朝相机移动的效果。
为什么不建议使用 rotate(0) 来修复动画？
因为它只是利用了 CSS 规范中的一个边界案例，可能导致不可预期的效果。
CSS 动画中的线性插值是如何工作的？
CSS 动画通过线性插值对每个变换组件进行动画处理，导致 scale 和 translate 的顺序影响最终效果。
➡️
