Follow best practices for performance and accessibility
Introduction to View Transitions
The View Transitions API is a game-changer for web animations. Instead of manually orchestrating complex CSS animations and JavaScript timing, you simply wrap your DOM updates in document.startViewTransition(), and the browser automatically creates smooth crossfade transitions between the old and new states.
Before View Transitions, creating smooth state changes required:
Capturing screenshots of the old state
Positioning elements precisely
Coordinating multiple animations
Managing z-index and timing
Cleaning up after animations complete
Now, the browser handles all of this automatically. You just update the DOM, and the browser smoothly transitions between states - animating position, size, opacity, and other properties seamlessly.
Basic View Transitions
The simplest use case is wrapping a DOM update in document.startViewTransition(). The browser automatically creates a crossfade animation.
While default transitions provide a crossfade, named transitions let you customize animations for specific elements. Assign a view-transition-name to elements, then target them with CSS pseudo-elements.
/* Assign a unique transition name */
.card {
view-transition-name: custom-card;
}
/* Define custom slide animations */
@keyframes slide-from-right {
from { transform: translateX(100%); }
}
@keyframes slide-to-left {
to { transform: translateX(-100%); }
}
/* Customize the old state (exiting) */
::view-transition-old(custom-card) {
animation: 300ms cubic-bezier(0.4, 0, 1, 1) both fade-out,
300ms cubic-bezier(0.4, 0, 0.2, 1) both slide-to-left;
}
/* Customize the new state (entering) */
::view-transition-new(custom-card) {
animation: 300ms cubic-bezier(0, 0, 0.2, 1) 90ms both fade-in,
300ms cubic-bezier(0.4, 0, 0.2, 1) both slide-from-right;
}
function toggleCard() {
document.startViewTransition(() => {
card.classList.toggle('expanded');
});
}
View Transition Pseudo-elements
The browser creates several pseudo-elements during transitions that you can style with CSS:
/* Root of the entire transition overlay */
::view-transition {
/* Usually don't need to style this */
}
/* Group container for a named transition */
::view-transition-group(name) {
/* Controls how old and new are composited */
}
/* Container for old/new snapshots */
::view-transition-image-pair(name) {
/* Isolates the two images */
}
/* Snapshot of the old state (exiting) */
::view-transition-old(name) {
animation: 300ms ease-out fade-out;
}
/* Live rendering of the new state (entering) */
::view-transition-new(name) {
animation: 300ms ease-in fade-in;
}
/* Target the default transition (no name) */
::view-transition-old(root) {
animation: 200ms ease-out zoom-out;
}
Layout Transitions
View Transitions excel at layout changes. By maintaining the same view-transition-name across layouts, elements smoothly morph between positions and sizes.
// Good: Transition one section at a time
document.startViewTransition(() => {
updateSection(currentSection);
});
// Avoid: Too many elements transitioning
document.startViewTransition(() => {
updateEntireDOM(); // Hundreds of elements! Slow!
});
6. Test on Lower-End Devices
Key Takeaways
View Transitions API provides automatic crossfade animations between DOM states
document.startViewTransition() wraps DOM updates to enable smooth transitions