View transitions have taken the web by storm, offering smooth, native-like navigation between pages. But moving beyond a simple cross-fade can feel daunting. To help you master these powerful animations, we've broken down seven actionable recipes—each with code, rationale, and pro tips. Whether you're a beginner or a seasoned developer, these techniques will level up your user experience.
1. The Classic Cross-Fade
The simplest view transition is a gentle cross-fade. To implement it, add @view-transition { navigation: auto; } to your CSS. The browser handles the rest—the old page fades out while the new one fades in. This is perfect for content sites where you want a subtle, unobtrusive effect. Pro tip: Combine it with a prefers-reduced-motion fallback to respect user preferences. Jump to the full setup section for the base code.
2. Custom Slide Animations
Want your pages to slide in from the right? Use @keyframes with ::view-transition-old(root) and ::view-transition-new(root). For instance, animate the old page sliding left and the new one sliding right. Key insight: Add a types descriptor—@view-transition { navigation: auto; types: slide; }—to target only this animation. This avoids conflicts with other transitions on the same site.
3. Respecting Reduced Motion
Not everyone enjoys movement. Wrap your view transition code in @media (prefers-reduced-motion: no-preference). This disables animations for users who have requested reduced motion at the OS level. It's a small but crucial accessibility touch. Remember: Always test with the setting enabled to ensure your pages still navigate correctly.
4. Morphing Elements Between Pages
For a more advanced effect, give elements a unique view-transition-name (e.g., view-transition-name: hero). The browser will morph that element from its old position to the new one, creating a seamless connection. Use case: Perfect for list-to-detail transitions on e‑commerce or portfolio sites. Combine with contain: layout to prevent layout shifts.
5. Multiple Transitions on One Page
You can run different animations for different navigation types—say, a slide for internal links and a fade for external ones. Use the types descriptor with custom names like internal or external. How to trigger: Add document.startViewTransition in JavaScript with a type parameter. This gives you granular control over the user experience.
6. Sequential Animations with Delays
Layer multiple animations by adjusting animation-delay on ::view-transition-group or individual pseudo-elements. For example, fade the header first, then the content. Caveat: Delays can disrupt perceived performance—keep them under 300ms. Test on slow connections to ensure the transition still feels snappy.
7. Debugging and Testing Transitions
When your transition doesn't work, check the browser's DevTools (look for the “View Transitions” panel in Chrome). Ensure both pages have the same @view-transition rule. Also verify that no CSS property like isolation: isolate breaks the stacking context. Final tip: Use document.startViewTransition with a callback for synchronous debugging.
Conclusion: View transitions unlock a new level of polish for web applications. Start with the cross-fade, then experiment with slides, morphs, and delays. Remember to always respect user preferences and test across browsers. The code snippets above give you a solid foundation—now go build something amazing!