我想使用CSS3过渡为具有多个div的容器的宽度设置动画。每个孩子都有一个background和一个属性background-size: cover。
我更喜欢使用CSS3 scale而不是width来获得更好的效果。但是scale，背景不会保留aspect ratio。
这是显示问题的fiddle。
是否可以保持宽高比？
答案 0 :(得分：1)
我认为不可能使用scale。
你知道，当你使用width来扩展div时，它迫使浏览器对元素和整个盒子模型进行一些数学计算，它就是CSS的布局并重新绘制并重新渲染它完全。
当您使用scale时，它会将您的元素移动到一个单独的图层，并且它不会重新计算任何内容，它只是以非常＆＃34;图形化处理元素的GPU＆＃ 34;因此，缩放0,5只是在视觉上缩小它就是这样。这就是为什么，正如你所说的那样，CSS转换在性能方面更好 - 因为它不会重新计算事物，但是你可以看到使用这些转换有一些缺点。由于它不会进行数学运算，所以它无法进行背景大小：覆盖，因为没有知道如何绘制它的信息。
或者，让我这样说吧：如果你做width: 50%浏览器计算元素的宽度并知道它 - 由于这些信息，它可以按照你想要的方式定位你的背景（你想要它cover所以它做数学，取宽度，高度，背景图像大小等。）。
如果你做scale它根据CSS布局不知道元素的宽度，它甚至不关心。它只是知道它的初始（视觉上）有多宽，呈现图层而不是缩小它而无需任何进一步处理。而且由于其GPU正在这样做，它真的非常快。