我有一张图片，它会根据概览/细节状态改变其高度。它需要是带有background-size: cover 的背景图像，以确保始终覆盖容器。
由于过渡需要高性能，我认为除了在包装元素上使用 transform: scaleY(0.5) 并在内部元素上使用相应的变换 transform: scaleY(2) 之外别无他法，即抵消了缩放效果。
在开始和结束时，数学都是正确的。不过，过渡看起来是错误的。 我准备了一个小小提琴来说明出了什么问题：
如您所见，即使是线性转换，也不会完全相互抵消。我想有一个潜在的数学问题，但我似乎无法找到解决方案。
【问题讨论】：
标签： css css-transforms
编辑：继续并为贝塞尔曲线制作了一个示例代码笔。
http://codepen.io/anon/pen/jAYOBO
您面临的问题是这些操作的相对性。您必须为播放中的过渡提供不同的值。您拥有关于变换的数学逻辑，但是，您修改这些特征的变换不会被调整以保持具有各自不同值的相同动画 - 变换值是相同的。
这意味着即使您在被转换的两个对象之间有一个完美的 2:1 比例，它们的变化率在过程的不同步骤中本质上是不同的 - 无论它们的目标/最终结果如何。如果您希望它们在外观上均衡，则需要调整过渡设置。
还在困惑吗？也就是说……
假设您有 2 个 div 框，它们位于不相互影响的独立容器中。下面是一些 CSS 来传达它们的相关属性：
div.a{
width:100px;
height:100px;
}
div.b{
width:200px;
height:200px;
}
我们可以对这些完全相同的元素进行转换：线性、10s，并将它们各自的大小加倍scale()。 （div.a 的高度/宽度为 200 像素，div.b 的高度/宽度为 400 像素）
现在，虽然这似乎与您的情况无关，并且很明显这两个不会以相同的速度“增长” - （不同的开始，不同的目的地 [不同样否定初始开始的差异]，具有相同的持续时间) - 这与您遇到的问题相同。
要纠正问题并让动画以您期望的方式运行，您必须修改过渡的计时功能。
为了证明我所描述的现象确实是实际发生的，我继续将转换元素之一的转换类型更改为缓和并在下面的codepen链接。玩它，你会明白我在说什么。如果您需要更多信息，请评论我的回答！
http://codepen.io/anon/pen/qNVgBB
有用的链接：http://cubic-bezier.com/
延伸阅读：Quadratic Bezier Curve: Calculate Point
（另外，我相信数学堆栈交换人员会喜欢为你咀嚼这些东西。我几乎肯定他们可以让你更清楚地了解曲线是如何分解的工作。） （呃，这现在真是一团糟。我会清理它并稍后重新格式化）
【讨论】：
transitioning 与box model 相关的其他属性，例如width 和height。但是，如果您仍想继续此操作，我相信我可以提出一个示例贝塞尔曲线，这将帮助您完成 scaleY() 取消工作！完成后，我将编辑答案并在顶部扔一个 codepen。
外部元素在scaleY(1) 和scaleY(0.5) 之间进行插值。
在时间t，转换将是scaleY(1-t/2)
t = 0 t t = 1s
┌ ┐ ┌ ┐ ┌ ┐
│ 1 0 0 0 │ │ 1 0 0 0 │ │ 1 0 0 0 │
│ 0 1 0 0 │ │ 0 1-t/2 0 0 │ │ 0 1/2 0 0 │
│ 0 0 1 0 │ │ 0 0 1 0 │ │ 0 0 1 0 │
│ 0 0 0 1 │ │ 0 0 0 1 │ │ 0 0 0 1 │
└ ┘ └ ┘ └ ┘
内部元素在scaleY(1) 和scaleY(2) 之间进行插值。
在时间t，转换将是scaleY(1+t)
t = 0 t t = 1s
┌ ┐ ┌ ┐ ┌ ┐
│ 1 0 0 0 │ │ 1 0 0 0 │ │ 1 0 0 0 │
│ 0 1 0 0 │ │ 0 1+t 0 0 │ │ 0 2 0 0 │
│ 0 0 1 0 │ │ 0 0 1 0 │ │ 0 0 1 0 │
│ 0 0 0 1 │ │ 0 0 0 1 │ │ 0 0 0 1 │
└ ┘ └ ┘ └ ┘
但是，这是相对于外部而言的。在绝对意义上，矩阵相乘：
t = 0 t t = 1s
┌ ┐ ┌ ┐ ┌ ┐
│ 1 0 0 0 │ │ 1 0 0 0 │ │ 1 0 0 0 │
│ 0 1*1 0 0 │ │ 0 1+t/2-t²/2 0 0 │ │ 0 2/2 0 0 │
│ 0 0 1 0 │ │ 0 0 1 0 │ │ 0 0 1 0 │
│ 0 0 0 1 │ │ 0 0 0 1 │ │ 0 0 0 1 │
└ ┘ └ ┘ └ ┘
那么，是的，起点和终点对应单位矩阵。
但在两者之间有抛物线scaleY(1+t/2-t²/2)。
使用贝塞尔曲线或许可以达到预期的效果。
令f(t)和g(t)分别为.outer和.inner的计时函数。
根据定义，f(0) = g(0) = 0 和 f(1) = g(1) = 1。
外层的比例由下式给出
( 1-f(t)/2 ) ( 1+g(t) ) = 1 + g(t) - f(t)/2 - f(t)g(t)/2
我们希望它是1，所以
f(t) = 2 g(t) / (1+g(t))
f'(t) = 2 g'(t) / (1+g(t))^2
f'(0) = 2 g'(0)
f'(1) = g'(1) / 2
也就是说，外部的起始坡度必须是内部坡度的两倍，结束坡度反之亦然。
选择f(t) = t（线性）和g，(.3, 0.15), (.7, .4) 给出的贝塞尔曲线似乎会产生不错的效果。注意g'(0) = 2 = 2 f'(0) 和g'(1) = 1/2 = 1/2 f'(0)。
.outer, .inner, .inner-expectation {
transition: transform 2s;
height: 400px;
}
.outer, .inner {
transition-timing-function: linear;
}
.inner {
transition-timing-function: cubic-bezier(.3, 0.15, .7, .4);
}
.inner {
background-image: url(https://upload.wikimedia.org/wikipedia/commons/thumb/f/f4/Souq_Waqif%2C_Doha%2C_Catar%2C_2013-08-05%2C_DD_107.JPG/1920px-Souq_Waqif%2C_Doha%2C_Catar%2C_2013-08-05%2C_DD_107.JPG);
background-size: cover;
}
a:hover ~ .outer {
transform: scaleY(0.5);
}
a:hover ~ .outer .inner {
transform: scaleY(2);
}
* {
box-sizing: border-box;
}
a {
display: block;
position: absolute;
top: 0;
left: 200px;
padding: 20px;
background: wheat;
}
.text {
position: absolute;
top: 0;
height: 100%;
}
.outer {
background: #fcf8b3;
position: absolute;
top: 80px;
left: 200px;
width: 400px;
height: 400px;
}
.inner, .inner-expectation {
position: absolute;
width: 300px;
top: 0;
left: 100px;
}
.inner .text, .inner-expectation .text {
right: 0;
}
.inner-expectation {
width: 20px;
top: 80px;
left: 610px;
background: rgba(255, 0, 0, 0.5);
}<a href="#">hover me</a>
<div class="outer">
<div class="text">outer</div>
<div class="inner">
<div class="text">inner</div>
</div>
</div>
<div class="inner-expectation"></div>问题是当悬停结束时，效果会中断。但这并不能完美解决。
反转时，外层的比例为(1+f(t))/2，内层的比例为2-g(t)（相对于外层）。
在绝对意义上，内部的规模将是
(1+f(t))/2 * (2-g(t)) = 1 - g(t)/2 + f(t) - f(t)g(t)/2
我们希望它是1。然后，f(t) = g(t) / ( 2-g(t) )。
但我们已经有了f(t) = 2 g(t) / (1+g(t))。
g(t) / ( 2-g(t) ) = 2 g(t) / (1+g(t)) => g(t) = 1
但是g(0) 必须是0。矛盾。你不可能在两个方向都取得完美的结果。
如果你愿意使用JS，你可以在鼠标进入或离开目标元素时交换外层和内层的计时功能。
【讨论】：
scaleY() 影响parent 和child 元素的大小（例如height）。
您正在以两种方式缩放child 元素的height，同时增加和减少。鉴于您为元素设置的值和属性，您所看到的是完全预期的行为.
假设如下：
parent 和 child 在 `height 中都是 100px。scaleY 的 parent 的数量是 0.5（这也会影响 child） 并且 child 是 2。transition 时间为1000ms。500ms:
parent 应缩放为0.75 (100px * 0.75 = 75px height)child 应缩放为1.5 (75px * 1.5 = 112.5px height)1000ms:
parent 应缩放为0.5 (100px * 0.5 = 50px height)child 应缩放为 2) (50px * 2 = 100px height)这就是为什么您会遇到 “先增长后缩小” 的行为。
我不会花时间摆弄一些三次贝塞尔值，而是责备你的元素结构和设计。
【讨论】：