At the moment view transitions are still being implemented, but it doesn’t mean that you can’t get ahead of the curve and experiment with them. However they’re not enabled by default; so in Chrome Canary you’ll need to toggle the following settings first:
The default behaviour for view transitions is a simple cross fade between two pages and to get that working all you need to do is add this
meta tag to the
<head> of your page:
<meta name="view-transition" content="same-origin">
Deploy that, and you’re done. This will give you a cross fade between every page. Nice and neat.
There’s a lot more power in view transitions, but that will take you more than two minutes to implement. However, not by much; 28 lines of CSS, and 3 tweaks to the HTML later and there is a nice tween between the blog listing page and the blog post itself. You can see the related commit on Github.
Many more words have been shared about view transitions… I have particularly enjoyed and benefited from these ones: