View Transitions Playground

Live demo

Cross-fade old and new snapshot — the default.

Showing Emerald

<!-- HTML -->
<button id="trigger">Toggle</button>
<div id="content">
  <article style="view-transition-name: card;">Card content</article>
</div>

<!-- CSS -->
<style>
::view-transition-old(root),
::view-transition-new(root) {
  animation-duration: 350ms;
  animation-timing-function: ease-in-out;
}
</style>

<!-- JavaScript -->
<script>
const trigger = document.getElementById('trigger');
const content = document.getElementById('content');

function toggle() {
  // Mutate the DOM here. The browser snapshots before & after.
  content.classList.toggle('alt-state');
}

trigger.addEventListener('click', () => {
  if (!document.startViewTransition) {
    toggle();
    return;
  }
  document.startViewTransition(toggle);
});
</script>

<!-- Cross-document (multi-page) -->
<style>
@view-transition {
  navigation: auto;
}
</style>

The @view-transition at-rule at the bottom enables cross-document transitions when the user navigates between pages on the same origin.