View Transitions is a new browser API that enables smooth transitions between pages. Astro has built-in support for this feature.

Enabling View Transitions

Add the view-transitions integration to your Astro config:

// astro.config.mjs
import { defineConfig } from 'astro/config';
import viewTransitions from '@astrojs/view-transitions';

export default defineConfig({
	integrations: [viewTransitions()]
});

Adding Transitions to Links

Simply add the transition:name attribute to elements you want to animate:

Creating Custom Transitions

You can customize transitions with CSS:

::view-transition-old(logo),
::view-transition-new(logo) {
	animation-duration: 0.5s;
}