为什么添加关键帧动画会改变z-index？

Question

我有一个场景，我需要为一个有孩子充当背景助手的div设置动画。孩子们需要始终留在div的背景之下。没有动画添加
z-index: -1 让他们远离透明背景。然而，在制作动画时，它们并不会落后于背景。

我准备了一个jsFiddle来展示这个：

--> https://jsfiddle.net/Jonathan002/gmv70wz7/6/

我知道我可以通过添加额外的div标签来解决这个问题。我想避免这种情况，并指出动画为什么会改变我的z-index值的问题。 div正在动画时是否还会发生其他属性变化？

如何在保留z-index值的同时自然地将div设置为动画（不会更改为dom）？

Answer 1

transform和opacity的元素不遵守常规z-index订单。

这是因为浏览器使用transform创建了一个单独的图层来加速动画，并且每个版本都会opacity属性requires special handling for compositing。