消除变换动画的模糊性？答案

【问题标题】：Remove blurriness on transform animations?消除变换动画的模糊性？
【发布时间】：2016-10-20 21:03:00
【问题描述】：

2016 年年中，有没有一个很好的解决方法来消除变换动画的模糊？

假设我有一些 div 里面有文本，我想用：

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

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

我尝试过的一件真正让事情变得更干净的事情是疯狂地放大字体，然后使用变换缩放将其恢复到原来的大小。现在，当动画运行时浏览器对我的文本进行光栅化时，它会使用高质量的图像。

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

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

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

【问题讨论】：

1.你能在 Codepen/JSFiddle 上展示一个例子吗？ 2. 什么浏览器？
@makshh 是的，当然。
@makshh jsfiddle.net/rtt0bp1w/1

标签： css transform css-animations

【解决方案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;  
}

【讨论】：