Webkit CSS-Animate 伪元素吗？答案

【问题标题】：Does Webkit CSS-Animate pseudo-elements?Webkit CSS-Animate 伪元素吗？
【发布时间】：2012-10-17 23:33:45
【问题描述】：

我正在为我正在开发的网站开发一种新的覆盖屏幕技术。我想利用 CSS 动画，因为它比 JavaScript 动画更容易、更快。我正在做一些简单的事情，但我在使用基于 webkit 的浏览器（如 Chrome 和 Safari）时遇到了问题。

这是我正在使用的代码：

body:after {
    content: '';
    width: 100%;
    height: 100%;
    background-color: #000;
    position: fixed;
    top: 0;
    left: 0;
    z-index: -1;
    transition-duration: .5s;
    -webkit-transition-duration: .5s;
    opacity: 0;
}

body.dimmed:after {
    z-index: 9999;
    opacity: .7;
}

如您所见，它使用 after 伪元素，并根据 body 类对其进行动画处理以显示或隐藏它。它适用于 Firefox，但不适用于 Chrome 或 safari。在这些浏览器上，动画不会发生，并且变化是瞬时的，这不是我想要的。如果你将相同的 CSS 应用到 body，而不是伪元素，动画就会发生：

body {
    content: '';
    width: 100%;
    height: 100%;
    background-color: #000;
    position: fixed;
    top: 0;
    left: 0;
    z-index: -1;
    transition-duration: .5s;
    -webkit-transition-duration: .5s;
    opacity: 0;
}

body.dimmed {
    z-index: 9999;
    opacity: .7;
}

这让我觉得过渡不适用于 Chrome 上的伪元素。是否应将此报告为错误？

【问题讨论】：

标签： css css-transitions css-animations

【解决方案1】：

这是一个已知的错误，多年前就知道了：

https://bugs.webkit.org/show_bug.cgi?id=23209

http://code.google.com/p/chromium/issues/detail?id=54699

【讨论】：

谢谢，由于某种原因，我找不到有关该行为的任何信息。我很惊讶他们没有修复这个错误。

【解决方案2】：

顺便说一句，目前您可以尝试使用这种技术：http://kizu.ru/en/pseudos/ — 通过触发元素本身的转换，然后将值继承给伪元素。这不适用于每个属性（例如 opacity），但您可以使用 using some imagination。

【讨论】：

谢谢，我会调查的。