@view-transition – The turning point of CSS animations

Here is a clear and detailed article to explain what @view-transition is and how it works, including alternative methods for creating transitions between pages on a website.

🔗 Do you like Techelopment? Check out the site for all the details!

What is `@view-transition`

It's a CSS rule introduced by the View Transition API, which automatically enables a visual transition when the user navigates between two pages on the same domain (Multi-Page App, MPA).

By inserting it into the CSS of both pages, navigation is enriched with an intermediate animation, making the transition smoother and less abrupt. (developer.mozilla.org, debugbear.com, developer.chrome.com).

Main Benefits:

Adds an elegant transition (by default a cross-fade) between pages with a single line of CSS, without the need for JavaScript.
Improves performance perception and user experience: visual continuity helps maintain context and reduces the sense of anticipation.

How it works

The API follows a structured process:

The user clicks on a link that points to a page on the same domain.
If both pages contain:
```
@view-transition {
  navigation: auto;
}
```
, a visual transition is automatically triggered. (developer.mozilla.org, developer.chrome.com)
The browser takes snapshots of the old and new states of the page.

A hierarchy of pseudo-elements is created:

::view-transition
└─ ::view-transition-group(root)
  └─ ::view-transition-image-pair(root)
   ├─ ::view-transition-old(root)
   └─ ::view-transition-new(root)

The default animation is a cross-fade: the old state fades, the new one appears; but it can be entirely customized with CSS. (developer.mozilla.org, developer.chrome.com, freecodecamp.org)

Possible customizations:

Custom animations with ::view-transition-old() and ::view-transition-new() (e.g., changing duration, timing, direction)
Target transitions to specific elements using view-transition-name, allowing for effects such as “morphing” between corresponding elements on two pages
Use view-transition-class to apply common styles to multiple elements without having to name them individually (developer.chrome.com)
Transition types (types) to differentiate animations based on context (e.g., forward vs. backward) (developer.chrome.com)

Support awareness

Ideally, all the instructions listed should display visual transitions between pages. However, in current browsers that do not support the MPA Navigation or View Transitions API, the effect is disabled or partial.

Conclusion and Usage Tips

Use Case	Minimal Setup	Outcome
Simple MPA	Add `@view-transition` in global CSS	Navigations Smooth and progressive crossfades
Improve the experience	Use `view-transition-name` and CSS pseudo-elements to morph and animate specific elements	Visually intelligent and engaging transitions
SPA (single-page app)	Use `document.startViewTransition()` for dynamic DOM updates	Integrated transitions for in-page interactions

Recommendations:

Test the API on Chrome 126+ (Cross-Document) or Chrome 111+ (Same-Document) to check the current behavior in browsers.
For static MPA sites, using this API is an elegant, lightweight solution to transform navigation — without JavaScript overhead — into an elegant, seamless experience.

Follow me #techelopment

Official site: www.techelopment.it
facebook: Techelopment
instagram: @techelopment
X: techelopment
Bluesky: @techelopment
telegram: @techelopment_channel
whatsapp: Techelopment
youtube: @techelopment

Techelopment

Cerca nel blog