CSS - Анимация свойства отображения

Question

У меня есть веб-страница, содержащая пять div. Пользователь может переключаться между разделами, нажимая следующую или предыдущую кнопку. Если щелкнуть дальше, я буду исчезать в следующем div поверх существующего и исчезнет существующий div. Представьте себе что-то вроде прокрутки некоторых фотографий.

Моя проблема заключается в том, что я только оживляю свойство непрозрачности. Из-за этого пользователи не могут взаимодействовать с некоторыми элементами видимого div. Моя догадка такова, что это потому, что на ней есть невидимый div.

@keyframes fadeIn { from { opacity:0; } to { opacity:1; }} 
@keyframes fadeOut { from { opacity:1; } to { opacity:0; }} 

.fade-in { 
    opacity: 0; 
    position: relative; 
    top: 0; 
    left:1rem; 

    animation: fadeIn 0.3s ease-in; 
    animation-fill-mode: forwards; 
} 

.fade-out { 
    opacity: 1; 
    position: relative; 
    top:0px; 
    left:1rem; 

    animation: fadeOut 0.3s ease-in; 
    animation-fill-mode: forwards; 
} 

Есть ли способ, с помощью CSS, что я мог бы изменить display свойство от inline до none когда fade-out анимация завершена? Я знаю, что могу подключить некоторые jQuery. Однако это кажется неуклюжим. Кажется, для меня должен быть способ изменить элемент от видимого до скрытого после того, как прошло 0.3 с.

Любая помощь приветствуется.

Answer 1

Да, непрозрачность будет содержать невидимые накладки сверху.

Animate opacity, но в то же время переключения visibility от/до hidden/visible которой взаимодействие с основными элементами один раз элемент является visibility:hidden

Кроме того, вместо relative, так как вы хотите нарастающий корыта эффект, absolute должен наилучшим образом подходит ваши требования.