Enhancing Joomla Page Navigation with CSS View Transitions

Have you noticed smoother navigation between pages on our site recently?

If not - give it a try. The transition effect is subtle but noticeable.

This improvement comes from a modern CSS feature called View Transitions, now supported in Chromium-based browsers (Chrome, Edge) and partially in Safari.

What are CSS View Transitions?

@view-transition is a new CSS at-rule that enables seamless visual transitions between documents of the same origin - without JavaScript.

Here’s the basic syntax:

@view-transition {
  navigation: auto;
}

This single line allows automatic transitions between internal pages, assuming standard navigation is used (no full reloads or target="_blank").

How This Applies to Joomla

For Joomla developers and template designers, View Transitions can enhance user experience during page loads, especially when using:

• Menu navigation without full page reloads
• Custom templates with component and module output
• SPA-like techniques or modern router systems in Joomla 4+

Adding this CSS rule globally (e.g., in your template.css) can improve the feel of your site with minimal effort.

Respecting User Preferences

Accessibility matters. Many users prefer reduced motion, and modern CSS supports this:

@media (prefers-reduced-motion: no-preference) {
  @view-transition {
    navigation: auto;
  }
}

This ensures animations only run when the user hasn't disabled motion in system settings.

Browser Support

This feature is not yet part of the Baseline web features, but is already working in:

• Chrome 111+
• Edge 111+
• Safari (partial)

You can check current support on Can I Use: View Transitions.