CSS转换比例（）-奇怪的延迟

运行下面的代码段-单击圆圈以切换动画。应该发生的是，随着父容器的缩放，子容器应该看起来好像没有移动

这是通过以与父组件相同的比例缩放子组件来实现的（父组件缩放为4，子组件缩放为0.25）

当动画完成时，缩放是正确的，但是在动画期间，它们似乎没有同步缩放

这几乎就像是父级先缩放，然后完成子级缩放

这是某种浏览器限制吗？还是我做错了什么

谢谢

const outer=document.querySelector（'.outer'）；
outer.addEventListener（'click'，（）=>{
toggle（'outer--active'）；
});
body{溢出：隐藏；}
.外部{
宽度：100px；
高度：100px；
溢出：隐藏；
边界半径：100%；
位置：绝对位置；
最高：50%；
左：50%；
转换：翻译（-50%，-50%）；
变换原点：左上角；
转变：转变1s；
光标：指针；
边框：1px纯黑；
}
.外部-活动{
转换：比例（4）转换（-50%，-50%）；
}
.内部{
位置：绝对位置；
最高：50%；
左：50%；
转换：翻译（-50%，-50%）；
宽度：400px；
高度：400px；
背景：url（'https://s3-us-west-2.amazonaws.com/s.cdpn.io/49240/14.jpg中心重复；
变换原点：左上角；
转变：转变1s；
}
.外部--活动的.内部的{
转换：比例（0.25）转换（-50%，-50%）；
}

问题
您看到的不是“浏览器错误”，而是对两种组合缩放计算方式的误解

为简单起见，我们假设转换函数是
线性的
（而不是
ease
，这是默认的定时函数）。在这种情况下，两种比例尺的曲线图如下：

因为我们希望内部元素的最终比例保持不变，所以对于所有时间参数，（比例上升函数）×（比例下降函数）=1。不幸的是，如果我们进行乘法运算，结果得到一个平方函数（在我们的例子中是-¾x²+3x+¾）。这是在过渡过程中可以看到的最终缩放的凸点。为了避免这种情况，我们需要在
scale（1/m）
css规则中缩放
m
，而不是转换
scale（n）
值。不幸的是，即使我们使用了css变量，我们也无法做到这一点，因为这些变量（还）不允许转换（参见答案）

为了缓解这种情况，我们可以制作一个自定义的
立方贝塞尔
计时函数，该函数与平方函数相反，但我无法手动执行，而且可能
立方贝塞尔
不会给出所有时间值的精确曲线，特别是如果我们想要基本定时函数，而不是
线性

解决方案
方法1：我们可以更改外部div的尺寸，而不是缩放，如下所示：


const outer=document.querySelector（'.outer'）；
outer.addEventListener（'click'，（）=>{
toggle（'outer--active'）；
});
body{溢出：隐藏；}
.外部{
宽度：100px；
高度：100px；
溢出：隐藏；
边界半径：100%；
位置：绝对位置；
最高：50%；
左：50%；
转换：翻译（-50%，-50%）；
变换原点：左上角；
过渡：所有1；
光标：指针；
边框：1px纯黑；
}
.外部-活动{
宽度：400px；
高度：400px；
}
.内部{
位置：绝对位置；
最高：50%；
左：50%；
转换：翻译（-50%，-50%）；
宽度：400px；
高度：400px；
背景：url（'https://s3-us-west-2.amazonaws.com/s.cdpn.io/49240/14.jpg中心重复；
变换原点：左上角；
转变：转变1s；
}
这里有一些类似的想法，就像另一个答案一样，你只需要一个元素就可以做到这一点

增加宽度/高度


const outer=document.querySelector（'.outer'）；
outer.addEventListener（'click'，（）=>{
toggle（'outer--active'）；
});
body{溢出：隐藏；}
.外部{
宽度：计算值（100px*var（-s，1））；
高度：计算（100px*var（-s，1））；
边界半径：100%；
位置：绝对位置；
最高：50%；
左：50%；
转换：翻译（-50%，-50%）；
背景：
url（'https://s3-us-west-2.amazonaws.com/s.cdpn.io/49240/14.jpg")中心,；
过渡：全部1.5s；
光标：指针；
边框：1px纯黑；
}
.外部-活动{
--s:4；
}

感谢您的详细介绍-解释得很好。由于性能和剪辑路径的原因，我避免了宽度和高度缩放，因为它还没有我所需要的浏览器兼容性。看来我需要考虑另一种过渡方式。再次感谢！很好，我第一次看到没有编辑的完整答案；）