How transitions work

This example illustrates the View Transition effect: the image displayed on the first page does not disappear abruptly, but transforms smoothly to become the image on the next page, with a new source and a different size. This type of animation provides fluidity and continuity to navigation.

On each page, an identical transition has been applied to the two images (via the Animation tab).
When you move from one page to the next, the browser links these elements and automatically generates a fluid animation between them.

Please note: for this demonstration to work correctly, the page must be opened in a full window (and not in a frame).
In addition, the View Transition API is not yet supported by Firefox.