[css-view-transitions-1] Animate backdrop-filter for named elements · Issue #9358 · w3c/csswg-drafts (original) (raw)

View Transition currently automatically animates an elements size/transform. backdrop-filter should probably also be in this list. Its a property of how the element renders where its embedded, not the element's content itself. Same discussion as mix-blend-mode: #8962.

With mix-blend-mode we don't set up an animation because it can't be interpolated but backdrop-filter can.

Here's an example: https://codepen.io/LukyVj/pen/MWZovLb. The following bit of CSS fixes the issue, which can be done automagically by the browser.

nav { view-transition-name: nav; }

::view-transition-group(nav) { backdrop-filter: blur(3px); }