CSS3 不透明度过渡问题答案

【问题标题】：CSS3 Opacity Transition IssuesCSS3 不透明度过渡问题
【发布时间】：2012-05-01 00:32:59
【问题描述】：

我一直在开发一个包含 CSS3 过渡的网站，但遇到了一点小问题。

每当我将鼠标悬停在应用了它的元素上时，先前 div 中的文本都会模糊，并在过渡完成后恢复正常。它在 Chrome 和 Safari 中运行良好，但在 Firefox 中运行时出现问题。

我在这里重现了这个问题：http://jsfiddle.net/fkbc6/

过渡当前应用于列表项，这显然不起作用。我也尝试将其应用于图像，但无济于事。

任何帮助将不胜感激，因为我完全没有想法。

【问题讨论】：

标签： html firefox css css-transitions

【解决方案1】：

http://jsfiddle.net/fkbc6/2/

错误是您应用的 CSS 的变换为 0.5 负度（目的是什么？），并且 Firefox 以一种奇怪的方式重新渲染所有字体，因为样式（在 css 中应用了两次）位于顶部 div示例

#wepartner {
    overflow:auto;
    margin:70px auto 70px auto;
    padding-top:80px;
    background:#F6F6F6;
    background:rgba(0,0,0,0.02);
    padding:80px 50px 50px 50px;
    -moz-transform:rotate(0.5deg);
    -webkit-transform:rotate(0.5deg);
    -o-transform:rotate(0.5deg);
    -ms-transform:rotate(0.5deg);
    transform:rotate(0.5deg)
}
#wepartner .content {
    -moz-transform:rotate(-0.5deg);
    -webkit-transform:rotate(-0.5deg);
    -o-transform:rotate(-0.5deg);
    -ms-transform:rotate(-0.5deg);
    transform:rotate(-0.5deg)
}

删除后一切正常

编辑：哇，事实上你应用了两个具有相同值和不同方向的旋转，小心使用 Ctrl-C Ctrl-V :P

编辑 2：希望此链接可以帮助您http://petermolnar.eu/linux-tech-coding/ie8-css-filter-matrix-cleartype-font-bug-fix/

【讨论】：

嘿，大卫，为您的帮助喝彩。仅出于文体目的将正向旋转应用于父 div (#wepartner)。其子 div (.content) 的负旋转是为了抵消锯齿状伪影（在原始旋转期间发生）并将文本和图像设置回其原始方向。我看到这解决了这个问题，但无论如何要保持 div 的旋转而没有这些问题？
当你将 CSS 应用到一个元素上时，你也将它应用到它的子元素上。我尝试将 0deg 应用于 .content 变换，因为负值不会发生交互，但会像您要求将负旋转添加到直 div 一样。还尝试为转换设置一个无值，但也不起作用。更多信息：developer.mozilla.org/en/CSS/transform我刚刚编辑了我的答案，添加了一个新链接petermolnar.eu/linux-tech-coding/…
感谢大卫的链接。恐怕我仍然无法让它工作。即使向父级添加了一个变换而对子级没有添加任何变换，我似乎仍然在悬停期间遇到渲染问题。这可能是浏览器错误，还是我的 CSS 中的某些内容可能导致它？
你有什么问题，在我提供给你的链接中，我在 FF 最新版本中工作正常，你实际使用什么代码？你能发布更新吗？