Among many of the new CSS API, ViewTransition has been one promising thing to look out for.
There’s one CSS rule hack which makes your website’s navigation experience very smooth.
@view-transition {
navigation: auto;
}The @view-transition CSS rule with navigation: auto; is part of the View Transitions API. This rule provides a simple way to create smooth animated transitions between different states of a web page. It is particularly useful for page navigations.
When set to auto, this rule enables automatic view transitions for navigation events (like page changes) in supporting browsers. This means:
- When a user navigates between pages, the browser will automatically create a smooth, animated transition between the old and new page states.
- It allows for seamless visual transitions without requiring you to manually define every animation detail.
- This is particularly useful in single-page applications (SPAs) or modern web applications to provide a more fluid user experience.
Key benefits:
- Reduces jarring page changes
- Provides a more polished, native-like navigation feel
- Minimal setup required compared to creating custom transition animations
Browser support is still evolving, so it’s recommended to check current browser compatibility. As of late 2024, modern browsers like Chrome, Edge, and Safari have been implementing this feature.
Visit MDN Docs for more.
https://developer.mozilla.org/en-US/docs/Web/CSS/@view-transition