0Pricing
CSS Academy · Lesson

View Transitions API

Create smooth page and element transition animations using the CSS View Transitions API.

What is the View Transitions API?

The View Transitions API (Chrome 111+) enables smooth, animated transitions between different states of a page or between page navigations. It captures before and after screenshots and morphs between them using CSS animations — enabling app-like transitions on the web.

Same-Document Transitions

Trigger a same-page transition by wrapping a DOM update in document.startViewTransition(() => updateDom()). The browser captures the old state, runs the update, captures the new state, and crossfades between them automatically.

document.startViewTransition(() => {
  document.querySelector(".content").innerHTML = newContent;
});

All lessons in this course

  1. Native CSS Nesting
  2. :has() Relational Pseudo-class
  3. @scope for Scoped Styles
  4. View Transitions API
← Back to CSS Academy