キーフレームアニメーションを追加すると、Z-インデックスが変更されるのはなぜですか？

Question

私は、バックグラウンドヘルパーとして働く子供を持つdivをアニメーション化する必要があるシナリオを持っています。子供たちはいつもdivの背景の後ろにいなければなりません。アニメーションを追加しない場合
z-index: -1は、背景が透明でない状態に保ちます。しかし、アニメーション化するときに背景の背後に留まることはありません。

は、私はこれを表示するためにjsFiddleを用意しています

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

私は私ではなく、背景となるように、余分なdivタグを追加することによってこの問題を解決することができます知っています。私はこれを避け、なぜアニメーションがZ-インデックス値を変更するのかという疑問を指摘したいと思います。 divがアニメーション化されているときに、別のプロパティの変更が起こっていますか？

zインデックス値を保持している間にdivを自然にアニメーションインする（domに変更を加えないで）ようにするにはどうすればよいですか？

Answer 1

transformおよびopacityの要素は、規則的なz-indexに従わない。

transformと、opacityのプロパティrequires special handling for compositingを使用して、アニメーションを加速するためにブラウザが別のレイヤーを作成するからです。