Question

2016年中期，是否有一个很好的解决方法可以消除变换动画的模糊性？

假设我有一些带有文字的div，我想用它来动画：

div:hover {
  transform: rotate(90deg);
  transition: 1s transform;
}

老实说，我尝试了所有在网上找不到的解决方案。大多数解决方案都有几年的历史了。

我试过的一件事情确实让事情变得更加清晰，就像疯了一样缩放字体，然后使用变换缩放将其恢复到原来的大小。现在，当浏览器在动画运行时光栅化我的文本时，它会以高质量的图像进行光栅化。

有没有更好的方法不那么hacky？

更清晰的问题：如何在不使对象变得模糊的情况下清除对象的动画？必须有一种方法可以停用浏览器正在进行的优化。

我目前使用chrome / webkit浏览器体验过这一点。

Answer 1

这是一个非常常见的问题 - 当不使用硬件加速时，Chrome呈现内容的方式会导致模糊。

这是一个常用的解决方案（一个黑客，可以这么说），这迫使 webkit 使用加速度，使元素不再模糊。

看看这里：I've updated your jsFiddle

您希望在进行转换时使用 translateZ 或 translate3d 属性，如下所示：

.one:hover {
  transform: rotate(90deg) translate3d(0,0,0);
  transition: 1s all;
}
.two:hover{
  transform: rotate(90deg) translateZ(0);
  transition: 1s all;
}
.three:hover{
  transform: rotate(90deg);
  transition: 1s all;  
}

删除变换动画的模糊度？

1 个答案: