Using ::view-transition to give the impression of animation between pages. See What's new in view transitions? (Google I/O 2024 update) for more information.

For this demonstration just click/tap any of the four arrows, or the center block above to take you to a new page.

The current page will slide out in the arrow direction and the selected page will slide in from the opposite side of the browser window.

Selecting the inner squares icon will scale up and fade out the current page and the 'Page #1' will scale up and fade in.

If you click/tap the same arrow, the same page will appear as the current page slides out.

Using the browser 'back' / 'forwards' buttons will also transition the pages.

All this is done using simple CSS styles. See the page source for the stylesheet on each page.

The transition between pages can use any value that can be transitioned.