Как я могу оживить непрозрачность на родительском контейнере при сохранении фонефильтра: 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>
• I have (or will have) many children in the container.

• I want to keep the animation logic at the container level to avoid applying animation to each child individually.

• I want to avoid complex JS-based fade management per child, for maintainability.
< /code>
Что я ищу: < /p>
Как я могу: < /p>
• Animate the parent container’s opacity using CSS keyframes,

• And still have the blur effect on child elements render properly throughout the animation?
< /code>
Любой обходной путь, который поддерживает чистую структуру и будущую расширяемость, приветствуется-независимо от того, включает ли он z-индекс, уловка контекста или передовые практики для изоляции фонового фильтра от воздействия анимации. < /p>




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