我想使用 CSS3 转换为具有多个 div 的容器的宽度设置动画。每个孩子都有一个background 和一个属性background-size: cover。
我更喜欢使用 CSS3 scale 而不是 width 以获得更好的性能。但是对于scale，背景不会保留其aspect ratio。
这是一个fiddle 显示问题。
是否可以保持纵横比？
【问题讨论】：
标签： css animation transform scale
我认为使用scale 是不可能的。
你看，问题是当你使用width 来缩放 div 时，它会强制浏览器对元素和整个盒子模型进行一些数学运算，它会完成 CSS 的布局并重新绘制和重新渲染它。
当你使用scale 时，它会将你的元素移动到一个单独的层并且它不会重新计算任何东西，它只是 GPU 以一种非常“图形化”的方式处理你的元素，所以缩放 0,5 只是缩小它视觉上就是这样。正如您所说，这就是为什么 CSS 转换在性能方面更好的原因 - 因为它不会重新计算事物，但是您可以看到使用这些转换有一些缺点。因为它不做数学运算，所以它不能做 background-size:cover 因为没有足够的信息知道如何绘制它。
或者，让我这样说：如果您这样做width: 50%，浏览器会计算元素的宽度并知道它 - 多亏了这些信息，它可以按照您想要的方式定位您的背景（并且您希望它位于 @987654325 @ 所以它在做数学运算，计算宽度、高度、背景图像大小等）。
如果您使用scale，它不知道元素在 CSS 布局方面的宽度，它甚至都不在乎。它只知道它最初的宽度（视觉上），渲染图层，而不仅仅是缩小它而不进行任何进一步的处理。并且由于它的 GPU 这样做，它真的非常快。
【讨论】：