在父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/