A lot of the transitions (like in:center:top-right) don't work in non-chromium browsers.

[emilio]

Hi @argyleink!

I was investigating why https://codepen.io/argyleink/pen/NWZZPLZ doesn't work with Firefox's view transition implementation and turns out it's because of the animation:

@keyframes circle-in-top-right {
  from {
    clip-path: circle(0%);
  }
  to {
    clip-path: circle(150% at top right);
  }
}

Those two clip-path values are not interpolable in Firefox and Safari, because the missing <position> in offset-path has a special meaning.

It's not clear whether <basic-shape>s should interpolate differently if they're in an offset-path or a clip-path, that's weird. Will file a spec issue to clarify. But in the meantime using 0% at center rather than just 0% would make this work in WebKit and Gecko.

[emilio]

w3c/csswg-drafts#12339

[argyleink]

Happy to fix! Expect an update to be pushed by early next week 🤘

[argyleink]

codepen and repo updated

i also tested the codepen in firefox after enabling the view transitions feature flag, and it's alllll good! ❤

[emilio]

Thank you!