Webkit CSS生动伪元素是否存在

Question

我正在为我正在研究的网站进行新的覆盖屏幕技术。我想利用动画为CSS，因为它比JavaScript动画更容易，更快。我正在做一些简单的事情，但是我在基于Webkit的浏览器等浏览器等方面遇到了麻烦。

这是我正在使用的代码：

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;
}

您可以看到，它使用后伪元素，并基于身体类，将其动画为显示或隐藏它。它在Firefox上效果很好，但在Chrome或Safari上不能。在这些浏览器上，动画不会发生，并且更改是瞬时的，这不是我想要的。如果您将相同的CSS应用于身体而不是伪元素，则动画发生：

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上的伪元素。应该将其报告为错误吗？

Answer 1

这是一个已知的错误，已经闻名了多年：

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

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

Answer 2

btw，目前您可以尝试使用此技术：http：//kizu.ru/en/pseudos/-通过在元素本身上触发过渡，然后继承值到伪元素。这对每个属性都不起作用（例如，对于opacity），但是您可以使用一些想象力来解决这些属性。