Webkit CSS是否为伪元素设置动画？

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

这是我正在使用的代码：

body:after{
内容：''；
宽度：100%；
身高：100%；
背景色：#000；
位置：固定；
排名：0；
左：0；
z指数：-1；
过渡时间：.5s；
-webkit转换持续时间：.5s；
不透明度：0；
}
身体。变暗：之后{
z指数：9999；
不透明度：.7；
}

如您所见，它使用after伪元素，并基于body类对其设置动画以显示或隐藏它。它在Firefox上运行良好，但在Chrome或safari上则不行。在这些浏览器上，动画不会发生，变化是瞬时的，这不是我想要的。如果对主体而不是伪元素应用相同的CSS，则会发生动画：

正文{
内容：''；
宽度：100%；
身高：100%；
背景色：#000；
位置：固定；
排名：0；
左：0；
z指数：-1；
过渡时间：.5s；
-webkit转换持续时间：.5s；
不透明度：0；
}
身体变暗了{
z指数：9999；
不透明度：.7；
}

---

这让我觉得转换不适用于Chrome上的伪元素。这是否应该被报告为一个bug？

这是一个已知bug，已经知道很多年了：

---

顺便说一句，目前您可以尝试使用这种技术：-通过触发元素本身的转换，然后将值继承到伪元素。这并不适用于所有属性（例如，对于

不透明度

），但您可以解决这个问题。

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