MOBILE FIRST WEB

CSS: View Transition on Multiple Pages Website - Now Your Website is Presentation

CSS view transitions offer a powerful way to create smooth, animated transitions between pages on multi-page websites. This technique enhances user experience by providing visual continuity as visitors navigate through different sections of a site. The View Transitions API allows developers to create seamless animations between different states within a document and across multiple pages. By implementing these transitions, websites can achieve a more polished and professional feel, improving overall user engagement and satisfaction. WebKit added support for the View Transitions API in Safari 18. Here is an example with View Transition On Multi Page Live Demo, including slides, and more complex animations. These transitions can be customized to match a site's design and brand identity, creating a visually appealing experience for users as they browse through different pages and sections of a website.

Understanding CSS Transitions

CSS transitions allow elements to change values over a specified duration. They rely on four main properties: transition-property, transition-duration, transition-timing-function, and transition-delay. The transition-property defines which CSS properties will animate. Common choices include opacity, transform, and background-color. Transition-duration sets the length of the animation, typically in seconds or milliseconds. Timing functions control the pace of the transition. Options like ease, linear, and cubic-bezier offer different animation styles. The transition-delay property adds a pause before the transition begins. To implement transitions, developers can use the shorthand transition property:

.your-element {
  transition: property duration timing-function delay;
}

Implementing Page Transitions with CSS

View transitions enable smooth animations between different pages or states within a website. To activate this feature, just add following CSS rule:

@view-transition {
  navigation: auto;
}

This simple setup creates a default crossfade effect between pages. For more control, use the ::view-transition pseudo-elements:

• ::view-transition-old: represents the old page state
• ::view-transition-new: represents the new page state

These pseudo-elements allow customization of the transition effect. For example:

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

Live Demo

You can find the view transitions live demo and source code with multiple pages.

Enjoy code.

CSS • September 18, 2024