带有变换的 CSS3 动画会导致 Webkit 上的元素模糊

Posted 2023-03-06

【中文标题】带有变换的 CSS3 动画会导致 Webkit 上的元素模糊

【英文标题】：CSS3 animations with transform causes blurred elements on Webkit

【发布时间】：2012-05-12 04:07:27

【问题描述】：

所以我有一些原生元素 (divs) 应用了各种效果（border-radius、box-shadow 和 transform: scale()）。当我为它们设置动画时，会发生两件奇怪的事情：

即使我没有尝试为比例设置动画，但如果我不将比例放入动画中，它也会被忽略。 当我将比例放入动画时，Webkit 会模糊元素

请参阅此处的示例：http://jsfiddle.net/trolleymusic/RHeCL/ - 底部的按钮将触发问题。

第一个问题也发生在 Firefox 中，所以我猜这是因为动画规范应该是这样工作的。不是我想要的，但好吧，我会接受的。

第二个问题很奇怪。我知道这与 3d 变换 有关，因为如果我（仅出于测试目的）在圆形元素上声明 -webkit-perspective 或 -webkit-transform-style: preserve-3d;，也会导致模糊问题。我的困惑是我并没有尝试转换 z 索引，而且我也尝试过使用纯 translateY 而不是 translate 的动画。

它发生在 Chrome (18)、Chrome Canary (20) 和 Safari (5.1.2 & 5.1.4) 中。

那么，我认为正在发生的事情是正确的吗？我怎样才能避免模糊？

最坏的情况：我可以对元素使用不同的大小而不是缩放它们，这不是一个真正的问题 - 但我认为这将是一个更优雅的解决方案，现在这个问题已经出现了。

【问题讨论】：

它被忽略了，因为 scale 和 translate 都是 transform 属性的值。制作动画时，覆盖之前的变换，即缩放。

是的，我是这么认为的。我想这就是transform 属性的工作方式，很遗憾您不能单独设置不同的属性。 EG：我可以为具有不同属性的多个元素的不透明度设置动画。

【参考方案1】：

请参阅此答案，了解为什么它会模糊元素：https://***.com/a/4847445/814647

以上总结： WebKit 在制作动画之前采用原始尺寸/CSS，并将其视为图像，然后将其放大，从而产生模糊效果。

解决方案： 将初始尺寸设为您要使用的最大比例，并从较低的比例开始（因此在您的情况下，您希望将尺寸增加 5，然后设置初始比例为 0.2)

更新

据我了解，它忽略当前比例的原因是因为您没有专门设置只是翻译（我现在正在查找 CSS）。当您运行-webkit-animation 时，它会重置您当前的所有变换（比例），因此您需要确保您的比例在其中。我正在查找要更改的 css，所以它只会更改位置：

【讨论】：

谢谢，是的，我已经看到了——但问题是在这个特定的例子中，我设置了多个元素，它们具有相同的基本结构、颜色和动画，但不同的常数比例.所以问题仍然存在，我需要为每个元素设置不同的初始大小或创建 muleiple 所以问题是我可以将初始元素编写为 400x400，然后使用 .big 和 .medium 将它们缩小到 0.5 /0.2 但随后动画将覆盖比例设置。所以在这种情况下，我不妨设置各个元素的大小，而不是使用比例。

我希望能够拥有：div.circle.big、div.circle.small、div.circle.whatever 并让.circle 设置基本属性，.big .small .whatever 设置各种尺寸，以及让所有.circles 继承相同的translateY 动画...

jsfiddle.net/trolleymusic/f7GBp 我认为，我能得到的最干净的解决方案。你怎么看。

【参考方案2】：

我发现最好的方法是等待动画完成，然后将变换直接应用于元素并删除动画类。这样的东西对我有用，不会产生任何故障：

$m.bindOnce($m('win-text'), 'webkitAnimationEnd', function() //avoid blurred problem with animating scale property in webkit
    $m('win-text').style.webkitTransform = 'scale(1.5) translateY(-60px)';
    $m.removeClass($m('win-text'), 'final');
);

我使用的库与 jQuery 不同，但你明白了。