In my opinion, the best cases for implementing view transitions are as a way to draw attention to an element, convey movement, and help users remain in context.

Add it to all pages to apply a default cross fade transition.

@view-transition {
    navigation: auto;
}

Then mark similar content with the view-transition-name css property.

Custom view transitions can be made with ::view-transition-old, ::view-transition-new, ::view-transition-image-pair.
Full page transition can be done by marking :root.
These transitions should be set only when the media query prefers-reduced-motion is set to no-preference.