我试图在进入视口时运行一个过渡效果。 我希望卡片只是透明度上升... 我的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);
}
}
我尝试过对子元素应用 transition,也尝试了将以下内容应用于父元素和背景:
-webkit-backface-visibility: hidden;
-webkit-transform: translate3d(0, 0, 0);
-webkit-perspective: 1000;