親のdivでアニメーションを使用すると遅れてCSSボックスの影が表示される

Question

だから私は複数のdivがあり、CSSアニメーションを使って表示されますが、divの子供の中ではボックスの影が使用されると遅延します。 私は自分のプロジェクトでどのように見えるか正確な例をフィドルに追加します。
コード実行時には、ヘッダbox-shadowに注意してください。
https://fiddle.jshell.net/a7Lu3nxx/

だから、私はanimation-fill-mode: backwardsを使用する場合、私はanimation-fill-mode: forwards or bothを使用している場合、その影がテーブルの後ろに隠されているボックス、そして箱-影が表示されますが、遅延の後に、ということを知ります。

私の質問は、その醜い遅延やJSやjQueryを使わずにボックスシャドウを読み込む方法です。

Answer 1

あなたの問題は、あなたがcontainer部門の両方で退色している​​ことです。あなたのボックスの影は、アニメーションの後に表示されます。すぐに表示したい場合は、上のコンテナをラップして、下のフィドルのようにbox-shadowに設定することをお勧めします。

フィドル：あなたのコメントに基づいてhttps://fiddle.jshell.net/25jzuawc/1/

はあなたがフェージングボックス影を気にしますか？

フィドル：あなたはボックスシャドウインセットを使用する必要がありますfirst-childなしhttps://fiddle.jshell.net/25jzuawc/2/

：

フィドル：https://fiddle.jshell.net/25jzuawc/3/

これは、箱の影の外観「突然のすべてを」醜いを持っていません。