CODEWITHSUNDEEP
css
user15072454
user15072454

Reputation:

CSS backdrop-filter: blur transition/delay?

I have an element with -webkit-box-reflect, and another element with backdrop-filter/-webkit-backdrop-filter above the element's reflection. My problem is that as the reflected element moves, the backdrop-filter blurs too quickly, making it look like it's flickering.

Is there a way to add a delay/transition to a blur backdrop-filter, so that it updates less frequently?

Live example (reflection only works properly in Chrome) or GitHub project

Container element:

#window {
    display: flex;
    flex-direction: row;
    width: 100vw;
    height: 100vh;
}

Backdrop-filter element:

#sidebar {
    min-width: 260px;
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-between;
    background: rgba(255, 255, 255, 0.1);
    border-right: 1px solid rgba(255, 255, 255, 0.1);
    position: relative;
    backdrop-filter: brightness(25%) saturate(180%) blur(30vw);
    -webkit-backdrop-filter: brightness(25%) saturate(180%) blur(30vw);
    z-index: 100;
}

Reflected element:

#destination {
    overflow: scroll;
    border: none;
    width: 100%;
    height: 100%;
    min-width: 700px;
    -webkit-box-reflect: left;
}

Upvotes: 1

Views: 4392

Answers (1)

Yong
Yong

Reputation: 1685

Yes, you can add transition: transform 0.5s ease; in the element's css. You can adjust the delay time by either increasing or decreasing the 0.5s ease (i.e. making it 1s will give it a 1-second delay).

Also, you can adjust the opacity of the backdrop-filter to achieve a somewhat same effect:

.bg {
  transition: backdrop-filter 0.2s;
  backdrop-filter: blur(4px) opacity(0);
}

.bg.show {
  backdrop-filter: blur(4px) opacity(1);
}

You may refer to this post.

Upvotes: 1

Related Questions