Тень коробки CSS появляется после задержки при использовании анимации на родительском div

таким образом, у меня есть несколько div, и они появляются с помощью анимации css, но когда используется тень коробки внутри детей div, она появляется с задержкой.
Я добавляю fiddle с точным примером того, как это выглядит в моем проекте.
Обратите внимание на заголовки box-shadowпри выполнении кода.
https://fiddle.jshell.net/a7Lu3nxx/


Таким образом, я узнаю , что, если я использую animation-fill-mode: forwards or both, то бокс-тень скрыта за столом, если я используюanimation-fill-mode: backwards, то бокс-тень появляется, но после задержки.

Мой вопрос в том, как загрузить box shadow без этой уродливой задержки и без использования JS или jQuery.

1 ответ

  1. Ваша проблема в том, что вы исчезаете в containerобоих дивах. Ваша тень появится после анимации. Если вы хотите, чтобы он был показан сразу, я бы предложил вам обернуть верхний контейнер и установить box-shadowего, как в скрипке ниже.

    Скрипка: https://fiddle.jshell.net/25jzuawc/1/

    Основываясь на вашем комментарии, вы бы не возражали, чтобы бокс-тень исчезла? Это не будет иметь уродливое» вдруг » появление box-shadow:

    Скрипка: https://fiddle.jshell.net/25jzuawc/2/

    Без the first-childвы должны использовать box-shadow inset:

    Скрипка: https://fiddle.jshell.net/25jzuawc/3/