CSS View Transitions are constrained to straight-line motion by default, but it's possible to add curved 'swoop' paths by using individual CSS transform properties (not the shorthand) alongside the browser's auto-generated keyframe naming convention. By anticipating the predictable keyframe names applied to `::view-transition-group()` pseudo-elements and injecting custom keyframes using individual transforms, developers can blend custom motion (scale, translate, blur) with the native transition. The shorthand `transform` property and `animation-composition: add` both break the effect. The post also highlights current limitations: no access to dynamic browser-calculated values, no `animation-composition: add` support, no per-axis easing or duration control, and fragility around keyframe naming conventions.
Sort: