Как я могу оживить непрозрачность на родительском контейнере при сохранении фонефильтра: blur () на детских элементах во ⇐ Html

[Anonymous]

Я пытаюсь анимировать родительский контейнер, используя непрозрачность, основанную на ключе, Fade-In/Out (@keyframes Fadein и Fadeout). Внутри контейнера есть дочерние элементы с фоновым фильтром: размытие (...) применяется для достижения эффекта матового стекла. < /P>
Вот упрощенная версия установки: < /p>

Код: Выделить всё

.shape-div {
width: 400px;
height: 400px;
border-radius: 12px;
background-color: rgba(0, 128, 0, 0.5);
backdrop-filter: blur(10px);
-webkit-backdrop-filter: blur(10px);
}
.fade-in {
animation: fadeIn 2s forwards;
}
.fade-out {
animation: fadeOut 2s forwards;
}

Проблема: когда я оживляю родительский контейнер (#mycontainer), используя анимацию затухания/из-за его непрозрачности, фоновой фильтр на .shape-div разрывается или исчезает во время анимации, особенно в Chrome и других. Размытие работает только в том, что не вложено внутри элемента с анимированной непрозрачностью. < /P>
Я понимаю, что анимирование непрозрачности на том же элементе, что и фоновое фильтр, работает нормально, но: < /p>

Я имею (или буду иметь) много детей в контейнере. Ребенок индивидуально. < /li>
Я хочу избежать сложного управления выдумкой на основе JS на одного ребенка, для обслуживания. /> И все еще оказывают эффект размытия на детские элементы, которые правильно отображаются на протяжении всей анимации? class = "Snippet">

Код: Выделить всё

Toggle Container with Keyframe Fade

body {
margin: 0;
height: 100vh;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
gap: 20px;
font-family: sans-serif;
background-image: url('https://picsum.photos/1200/800');
background-repeat: no-repeat;
background-position: center;
background-size: cover;
}

.container {
display: inline-block;
position: relative;
}

.shape-div {
width: 400px;
height: 400px;

border-radius: 12px;
background-color: rgba(0, 128, 0, 0.5);
backdrop-filter: blur(10px);
-webkit-backdrop-filter: blur(10px);
}

button {
padding: 10px 20px;
font-size: 16px;
cursor: pointer;
}

@keyframes fadeIn {
from {
opacity: 0;
}

to {
opacity: 1;
}
}

@keyframes fadeOut {
from {
opacity: 1;
}

to {
opacity: 0;
}
}

.fade-in {
animation-name: fadeIn;
animation-duration: 2s;
animation-fill-mode: forwards;
}

.fade-out {
animation-name: fadeOut;
animation-duration: 2s;
animation-fill-mode: forwards;
}









Toggle Container


let isVisible = true;
const container = document.getElementById('myContainer');

function toggleContainer() {

if (isVisible) {
container.classList.remove('fade-in');
container.classList.add('fade-out');
} else {
container.classList.remove('fade-out');
container.classList.add('fade-in');
}

isVisible = !isVisible;

}

Подробнее здесь: https://stackoverflow.com/questions/796 ... rop-filter