View transitions without JavaScript

Click a planet: its picture and name move and grow into the detail page, although the browser loads a new page from the server. This is a cross-document view transition, turned on for all examples by a single rule in the global stylesheet: @view-transition { navigation: auto; }.

Elements with the same view-transition-name on the old and the new page are animated from one position and size to the other, everything else fades. Jeasx only has to render matching names on both pages, here taken from the slug of each planet. Browsers without support simply load the next page as usual.

Mercury
Venus
Earth
Mars
Jupiter
Saturn
Uranus
Neptune