删除变换动画的模糊度?

时间:2016-06-19 14:42:50

标签: css css3 transform css-animations

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

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

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

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

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

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

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

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

1 个答案:

答案 0 :(得分:0)

这是一个非常常见的问题 - 当不使用硬件加速时,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;  
}