当使用 css3 缩放元素时，它会变成像素化，直到动画完成之后。我正在为带有边框的元素制作动画

Posted 2023-03-06

【中文标题】当使用 css3 缩放元素时，它会变成像素化，直到动画完成之后。我正在为带有边框的元素制作动画

【英文标题】：when scaling an element with css3 scale, it becomes pixelated until just after the animation is complete. I'm animating an element with a border

【发布时间】：2012-04-16 16:36:00

【问题描述】：

http://jsfiddle.net/nicktheandroid/5Ytnj/

当我将-webkit-backface-visibility: hidden; 添加到.circ 元素时，即使在动画完成后它也会保持像素化。

我想知道是否有办法让它在制作动画时不像素化。 我在 Google Chrome 的开发版中查看过。

【问题讨论】：

我遇到了同样的问题，除了我在缩放带有文本的按钮时遇到问题。这是一个与here 提到的问题类似 的问题。有边界没关系，it happens with text too。

【参考方案1】：

好的，所以我想我想出了一个变通办法；

基本上；不要使用“比例”。使用“scale3d”并进行设置，以便您想要的最大图像是scale3d(1,1,1)。

Here 是您在其中的圆形事物的示例。我将比例更改为 5，因为我不想将 0.222222222222222222222222222222222 放入 scale3d 函数中...

[edit] 所以我再次尝试了 jsfiddle 演示，在没有硬件加速的计算机上，像素化效果消失了。所以它似乎与 scale3d 相同的问题，它将其转换为纹理然后缩放它。你可以像 circ3 div here 那样做。

【讨论】：

谢谢，这也解决了我的问题！显式设置 scale3d(1,1,1) 为起始状态（即 CSS 类），然后使用 scale3d(1.5, 1.5, 1.5) 为过渡类，就可以了。应该是公认的答案。

对我来说没有任何区别，图像最初是清晰的，在整个缩放过程​​中使用 scale3d 像素化并在动画后清晰。

@Rob 我很确定它依赖于浏览器，也依赖于 GPU。您可以在 firefox 的各种配置位中更改它，在 chrome 中您可以添加命令行参数来强制/禁用 gpu 加速。