在父div上使用動畫後出現CSS盒子陰影

Question

所以我有多個div，它們使用css動畫顯示，但是當div窗口中的子陰影使用盒子陰影時，它會延遲顯示。 我加了一個精確的例子，它在我的項目中看起來如何。
運行代碼時請注意標頭box-shadow。
https://fiddle.jshell.net/a7Lu3nxx/

所以我發現，如果我用animation-fill-mode: forwards or both，然後框陰影隱藏在桌子後面，如果我用animation-fill-mode: backwards，然後出現箱陰影，但延遲後。

我的問題是，如何加載盒陰影沒有這個醜陋的延遲，而不使用JS或jQuery。

Answer 1

你的問題是，你在container divs都在消失。你的盒子陰影將在動畫之後出現。如果你想讓它直接顯示出來，我會建議你把上面的容器包起來，並且像下面的小提琴那樣設置box-shadow。

小提琴：https://fiddle.jshell.net/25jzuawc/1/

基於您的評論，你會介意箱陰影衰落？這不會有難看的 「突然」 的框陰影的外觀：

小提琴：https://fiddle.jshell.net/25jzuawc/2/

沒有first-child你應該使用的box-shadow插圖：

小提琴：https://fiddle.jshell.net/25jzuawc/3/