Question

我正在为我正在开发的网站开发一种新的覆盖屏幕技术。我想利用动画到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 {
    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），但您可以使用using some imagination进行处理。

Webkit CSS-Animate是伪元素吗？

2 个答案: