CSS3动画与变换在Webkit上导致元素模糊

Question

所以我有一些应用了不同效果（例如：border-radius、box-shadow 和 transform: scale()）的本地元素（如 div）。 当我对它们进行动画处理时，出现了两个问题：

1. 即使我没有尝试动画缩放，如果我不在动画中放置缩放，则会被忽略。
2. 当我将缩放放入动画中时，Webkit 会使元素模糊。

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

第一个问题在 Firefox 中也会发生，所以我猜这是动画规范要求的方式。虽然不是我想要的，但好吧，我可以接受。

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

它在 Chrome（18）、Chrome Canary（20）和 Safari（5.1.2 和 5.1.4）中都发生。

所以，我对正在发生的事情有正确的理解吗？我如何避免模糊？最坏的情况是：我可以使用不同尺寸的元素而不是缩放它们，这并不是问题 - 但我认为这是一种更优雅的解决方案，现在出现了这个问题。

- Trolleymusic

---

这被忽略了，因为scale和translate都是transform属性的值。在进行动画时，你会覆盖之前的transform，即scale。 - mddw

是的，我也这么认为。我猜这就是transform属性的工作方式，很遗憾你不能单独设置不同的属性。例如：我可以动画地改变具有不同属性的多个元素的不透明度，这些元素具有不同的类。 - Trolleymusic

Answer 1

参考此回答以了解为什么会使元素变模糊：https://dev59.com/FW445IYBdhLWcg3w6eRo#4847445

上述内容摘要： WebKit在动画之前采用原始的大小/CSS，并将其视为图像，然后再进行缩放，导致出现模糊。

解决方案： 将初始大小设置为你要达到的最大比例，并最初使用较低的比例进行启动（在你的情况下，你需要将大小增加5倍，并将初始比例设置为0.2）。

更新

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

- Josh Allen

---

谢谢，是的，我看到了这个问题-但问题在于，在这个特定的例子中，我正在设置多个具有相同基本结构、颜色和动画的元素，但比例尺不同。因此，问题仍然存在，我需要为每个元素设置不同的初始大小或创建多个元素。所以，我可以将初始元素设为，比如400x400，然后使用.big和.medium来将它们缩小到0.5/0.2，但是动画将覆盖比例设置。因此，在这种情况下，我可能会单独设置每个元素的大小，而不是使用比例。 - Trolleymusic

我想要实现以下功能：div.circle.big、div.circle.small、div.circle.whatever，并希望.circle设置基本属性，.big .small .whatever设置不同的大小，并希望所有的.circles继承相同的translateY动画... - Trolleymusic

http://jsfiddle.net/trolleymusic/f7GBp/ <-- @JoshAllen：我认为这是最干净的解决方案。你觉得呢？ - Trolleymusic

Answer 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不同的库，但是你可以理解这个想法。

- Gianluca Pinoci