What is View Transition API?

Turkish: View Transition API

View Transition API lets browsers animate between old and new page or state views during navigation and UI updates.

What is the View Transition API?

The View Transition API lets the browser animate between an old view and a new view when a page navigation or UI state change happens. The goal is to help users keep context instead of feeling that the screen suddenly jumped.

How It Works

Before the transition, the browser captures the current view, applies the DOM update, and exposes old and new snapshots for CSS animation. In simple cases, calling document.startViewTransition() is enough. More advanced flows assign view-transition-name to elements so cards, headings, or images can visually match across screens.

The API can be used in multi-page sites as well as SPA applications. Frameworks such as Astro can provide helpers for page transitions, but the accessibility and performance impact still depends on the design choices.

Business Use

Product catalogs, portfolio sites, gallery experiences, and dashboard detail views use view transitions to make it clearer which item led to which screen. Card-to-detail navigation is a common example where perceived smoothness improves.

Not every interaction needs animation. Long, slow, or motion-heavy transitions can make the experience worse, so teams should respect prefers-reduced-motion and test on lower-end devices.