主要观点：作者在使用 Discord 时遇到图像缩放动画的奇怪现象，通过 CSS 代码研究发现 scale 后跟 translate 会导致动画非线性，通过将 translate 放前面可修复，rotate(0) 也能使动画正常是因 CSS 规范的特殊情况，还介绍了用 3D translate 替代 scale 可实现不同效果。
关键信息：

• CSS 代码中 transition、transform 属性及相关值的设置影响动画效果。
• 动画算法中对 from 和 to 变换值的处理及线性插值过程。
• scale 与 translate 顺序对动画效果的影响及修复方法。
• rotate(0) 使动画正常的原因及相关转换过程。
• 用 3D translate 替代 scale 实现不同动画效果及相关计算。
  重要细节：
• 原始代码中 transition: transform 1s ease; 及 demo.zoom 中的 transform: scale(3) translate(-33.1%, 20.2%); 等设置。
• 动画算法中对变换值的填充、转换及线性插值过程的具体细节。
• 修复动画时将 translate 放前面的具体代码及效果对比。
• 用 3D translate 实现效果的代码及与 scale 版本的对比。