我有一个根据概述/详细信息状态更改其高度的图像。它必须是带有background-size: cover的背景图像，以确保始终覆盖容器。
由于过渡需要高效，因此我看不到其他方法，只能在包装器元素上使用transform: scaleY(0.5)，在内部元素上使用相应的转换transform: scaleY(2)，这可以消除缩放效果。
在开始和结束时，数学都是正确的。不过，这种过渡看起来是错误的。
我准备了一个 fiddle 来说明出了什么问题:
Codepen - Fiddle
如您所见，这些过渡即使是线性的，也不会彼此完全抵消。我想这是一个潜在的数学问题，但是我似乎找不到解决方案。
最佳答案
编辑:继续，并为bezier曲线制作了示例代码笔。
http://codepen.io/anon/pen/jAYOBO
现在具有用于过渡回正常元素状态的曲线:
http://codepen.io/anon/pen/oLpLLG
您面临的问题是这些操作的相对性。您必须为播放中的过渡提供不同的值。您具有关于转换的数学逻辑权利，但是，修改这些特性的转换没有进行调整，以维持相同的动画，但它们具有各自不同的值-转换值相同。
这意味着即使您在两个要转换的对象之间具有完美的2:1比例，的变化率在过程的不同步骤上也固有地不同-不管它们的目的地/最终结果如何。如果希望它们的外观相等，则需要调整过渡设置。
还是很困惑？换句话说....
假设您在单独的容器中有两个不互相影响的div框。以下是一些CSS来传达它们的相关属性:
div.a{
width:100px;
height:100px;
}
div.b{
width:200px;
height:200px;
}
我们可以对它们进行完全相同的转换:线性，10s，并使用
scale()将它们各自的大小加倍。 (div.a的高度/宽度为200px，div.b的高度/宽度为400px)现在，虽然这似乎与您的情况无关，并且很明显这两个不会以相同的速度“增长”((不同的开始时间，不同的目的地(并没有相等地抵消初始开始时间的不同)，并且持续时间相同)-与您遇到的问题相同。
要纠正此问题并使动画以预期的方式运行，您必须修改过渡的计时功能。
为了演示我所描述的现象确实确实在发生，我继续进行了操作，并将您的一种转换元素的过渡类型更改为易于转换的元素，并在下面的Codepen链接上进行了 fork 。玩它，您会明白我在说什么。如果您需要更多信息，请评论我的答案!
http://codepen.io/anon/pen/qNVgBB
有用的链接:http://cubic-bezier.com/
扩展阅读:Quadratic Bezier Curve: Calculate Point
(此外，我敢肯定，数学堆栈交换的人们会喜欢为您咀嚼这些东西。我几乎肯定的是，他们可以为您提供关于曲线工作原理的更清晰的分割。)
(哎呀，这真是一团糟。我会整理一下，然后重新格式化)
关于css - 嵌套的CSS缩放转换过渡不会互相抵消，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/38354938/