View Transition API
Create smooth transitions between different states of a document. Build engaging UI transitions with minimal code, enhancing user experience during state changes.
Browser Support
Basic View Transition
Create smooth transitions between UI states with minimal code. This example shows how to animate a theme change from light to dark mode, helping users maintain context during the switch and making your app feel more cohesive and thoughtfully designed.
Output
Click Run to see output...Custom View Transition
Control how specific elements animate during transitions. This example demonstrates how to use the view-transition-name CSS property to create targeted animations for individual elements, allowing them to move independently while maintaining visual continuity across state changes.
Output
Click Run to see output...Advanced View Transition
Create complex, coordinated animations across multiple elements. This example shows how to transform your entire layout while keeping users oriented, perfect for expanding cards into detailed views, switching between grid and list layouts, or any scenario where elements need to move and transform simultaneously.
Output
Click Run to see output...