so I have multiple div's and they appear using css animation, but when is box shadow used inside div's children it appears with delay.
I add fiddle with exact example how it looks in my project.
Take attention at headers box-shadow when running code.
https://fiddle.jshell.net/a7Lu3nxx/
So I find out that, if I use animation-fill-mode: forwards or both, then box shadow is hidden behind the table, if I use animation-fill-mode: backwards, then box-shadow appears, but after delay.
My question is, how to load box shadow without that ugly delay and without using JS or jQuery.
Your problem is that you are fading in both the container divs. Your box shadow is going to appear after the animation. If you want it to be shown straight away I would suggest you wrap the upper container and set the box-shadow to it like in the fiddle below.
Fiddle: https://fiddle.jshell.net/25jzuawc/1/
Based on your comment would you mind the box-shadow fading in? This will not have the ugly "all of a sudden" appearance of the box-shadow:
Fiddle: https://fiddle.jshell.net/25jzuawc/2/
Without the first-child you should use box-shadow inset: