Я пытаюсь запустить переход при входе в область просмотра. Я хочу, чтобы карты были просто непрозрачными ... У меня есть прокси-элемент внутри моего div с фоновыми фильтрами, применяемыми для создания эффекта матового стекла. Когда есть какой-либо тип изменения непрозрачности для родительского элемента, фильтр просто не применяется и приводит к неуклюжей анимации. Вот CSS для контекста:
.card {
width: 100%;
position: relative;
min-height: 320px;
border-radius: 12px;
overflow: hidden;
padding: 32px 24px;
box-shadow: 0px 3px 6px rgba(0, 0, 0, 0.16);
text-align: center;
display: flex;
align-items: center;
justify-content: center;
max-width: 45rem;
margin: 8px 0;
transition: all 0.4s ease;
.backdrop {
position: absolute;
top: 0;
bottom: 0;
right: 0;
left: 0;
border-radius: 12px;
backdrop-filter: blur(32px) brightness(115%);
background-color: rgba(255, 255, 255, 0.16);
}
}
Я попытался применить переход к дочернему, а также попытался применить следующее как к родительскому, так и к фону:
-webkit-backface-visibility: hidden;
-webkit-transform: translate3d(0, 0, 0);
-webkit-perspective: 1000;