【发布时间】：2016-03-20 20:46:37
【问题描述】：
我知道有很多主题涉及由 CSS 动画引起的模糊，但我似乎遇到了一个相当独特的用例，我遇到的每个解决方案都根本不起作用。
我制作了一个代码笔，显示了我的确切问题的极简设置：
基本上，我有一个不透明度为0.95 的div 倾斜了10 度，其内部内容倾斜了-10 度（因此它看起来是直立的）。在此内容的底部有一个段落。当您将鼠标悬停在它上面时，它会触发段落向右移动的动画。不幸的是，这使得页面上的所有文本都变得模糊。
请注意，删除倾斜变换或不透明度设置会使文本不再模糊。
【问题讨论】：
-
既然您已经知道删除不透明度设置可以修复错误...为什么不删除它呢？在
opactiy:.95和模糊错误和opacity: 1之间选择没有模糊错误。会是什么？ -
除非我想要这两个属性，否则我不会发布这个问题。
-
我不能给出完整的答案（也不能给出 100% 权威的解释），但这似乎是因为浏览器中的加速渲染和图层创建。对于 Chrome，
.jumbotron *{backface-visibility: hidden;}完美解决了这个问题，但在 IE11 和 Firefox 中仍然没有任何作用。 -
要求调试代码的问题需要在问题中包含minimal reproducible example。除非您有 Sass->CSS 编译问题，否则只提供编译后的 CSS（以及重现问题所需的 HTML）。
-
codepen 中怎么没有提供呢？ SCSS 窗格中有一个“查看已编译”选项，左侧窗格中提供了 html。
标签： html css sass css-animations