网络动画的第一条规则：不要动画化width和height。 它会迫使浏览器重新计算大量内容，速度很慢（或者像他们所说的那样“代价高昂”）。 如果可以避免，动画化任何transform属性的速度会更快（并且“更便宜”）。
但是，transform可能很棘手。 请查看为了使此菜单打开/关闭动画真正高效而变得多么复杂。 Rik Schennink 在博客中讨论了另一种棘手的情况：border-radius。 当您沿一个方向动画化元素的缩放比例时，会出现一个挤压效果，其中角不会保持其良好的半径。 解决方案？9 切片缩放
此方法允许您缩放元素并拉伸图像 2、4、6 和 8，同时使用绝对定位将 1、3、7 和 9 连接到各自的角。 这会导致在缩放时角不会被拉伸。
这就像 2020 年版的滑动门。