我有2个元素，一个是width:75%，另一个是width:25%。我使用伪元素来给这些宽高比。
第一个元素的宽高比为3：1。第二，比例为1：1。
我试图对此进行动画处理，以便当它悬停在具有width:25%的元素上时，它和它的兄弟会切换宽度和宽高比，基本上会使一个增长到75％而另一个缩小到25％。
然而，当这样做时，虽然动画是平滑的，但随着它们的动画制作，它们会凸起并在高度上增长，然后最终以其切换尺寸停下来。它应该是什么样的，就好像两个元素的宽度发生了变化。这可能没有意义;在这个小提琴中亲眼看看：
Fiddle （将鼠标悬停在黄色方块上。如果它和红色矩形不在一起，请稍微加宽框架 - 它使用引导程序）
当然，一个简单的解决方案是设置高度而不是使用比率。但这不适用于我使用的响应式网格。所以它必须使用伪元素宽高比。
我确定这不是代码中的错误或任何明显的错误 - 它的行为与它应该完全一样。但我试图弄清楚如何抵消“膨胀”的问题。我想也许给两个元素一个缓和，与另一个元素相反可能会修复它，但这似乎并没有。