CSS Academy · Lesson

View Transitions API

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

View Transitions API is a free CSS Academy lesson on CoddyKit — lesson 4 of 4. You can read the complete lesson below for free — then practise it hands-on in the browser with a built-in code editor and a 24/7 AI tutor. It is part of the CSS Academy learning path, one of 4 lessons in the course, and your progress syncs across the web and the CoddyKit app.

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;
});

Default Crossfade

Without any CSS, View Transitions performs a simple crossfade between old and new page states. This single line of JavaScript adds a polished transition that previously required complex CSS animation orchestration or a dedicated animation library.

CSS Pseudo-elements

The API exposes four pseudo-elements: ::view-transition (root overlay), ::view-transition-old(root) (old page screenshot), ::view-transition-new(root) (new page screenshot), and ::view-transition-image-pair(root). Customize them with CSS animations.

Named Transitions with view-transition-name

Assign view-transition-name: hero-image to an element that persists across the transition. The API morphs this element from its old position/size to its new position/size — creating smooth element-level animation automatically.

.hero-img {
  view-transition-name: hero-image;
  contain: layout;
}

Custom Animations

Override the default crossfade with custom keyframes on the pseudo-elements: slide in from the right for forward navigation, slide in from the left for back. Target ::view-transition-new(root) and ::view-transition-old(root) with @keyframes.

MPA Transitions (Navigation API)

Cross-document View Transitions (Chrome 126+) animate between full page navigations in multi-page apps. Add @view-transition { navigation: auto; } to CSS — the browser handles the transition between HTML pages automatically, no JavaScript needed.

Accessibility: Respecting Motion Preferences

Users with vestibular disorders should not experience motion-heavy transitions. Wrap transition animations in @media (prefers-reduced-motion: no-preference) to disable custom animations for users who prefer reduced motion while keeping the functional DOM update.

@media (prefers-reduced-motion: no-preference) {
  ::view-transition-old(root) { animation: slide-out 300ms; }
  ::view-transition-new(root) { animation: slide-in 300ms; }
}

SPA Framework Integration

React Router v6.4+, Vue Router, and Astro support View Transitions. Frameworks wrap route changes in startViewTransition automatically. Configure per-route transition styles with view-transition-name on persistent elements like navigation and layout shells.

Performance Considerations

View Transitions capture screenshots of the page, which can be expensive for complex layouts. Large pages with many composited layers may show jank during capture. Keep transition duration under 300ms and avoid transitioning extremely complex subtrees.

Progressive Enhancement

Check API availability before using: if (!document.startViewTransition) { updateDom(); return; }. The fallback updates the DOM normally without animation. View Transitions are progressive enhancement — the app works without them; they simply improve the experience where supported.

Knowledge Check

What does view-transition-name on an element enable during a View Transition?

Summary

The View Transitions API enables crossfade and morph animations between DOM states or page navigations with minimal code. Named transition elements morph automatically; custom pseudo-element animations replace the default crossfade. Respect prefers-reduced-motion and use progressive enhancement for unsupported browsers.

Frequently asked questions

Is the “View Transitions API” lesson free?

Yes — the full text of “View Transitions API” is free to read here on the web, and the CSS Academy course includes 4 lessons in total. To practise it interactively (a built-in code editor and a 24/7 AI tutor) and unlock the rest of the CSS Academy course, upgrade to CoddyKit PRO.

What will I learn in “View Transitions API”?

Create smooth page and element transition animations using the CSS View Transitions API. You practise CSS Academy with hands-on code you run directly in the browser, and a 24/7 AI tutor answers your questions as you work through the lesson.

Do I need any experience to start CSS Academy?

No prior experience is required. CSS Academy on CoddyKit is structured for beginners through advanced learners; this is — lesson 4 of 4, so you can start here or from the beginning and move at your own pace.

How long does the “View Transitions API” lesson take?

Most CoddyKit lessons take about 5–10 minutes. Each one is bite-sized and interactive, so you make steady progress and pick up exactly where you left off across the web and the app.

Can I write and run code in this CSS Academy lesson?

Yes. Every CSS Academy lesson includes a built-in code editor, so you write and run real code right in your browser and get instant AI feedback — no local setup required.

All lessons in this course

← Back to CSS Academy