[6.0] Cassiopeia - Add view-transition for pages

[hans2103]

Pull Request for no Issue .

Summary of Changes

Adding @view-transition for smoother navigation between pages.

@view-transition provides a mechanism for easily creating animated transitions between different DOM states, while also updating the DOM contents in a single step. This API is specific to cross-document transitions.
source: https://caniuse.com/?search=%40view-transition

example by Adam Argyle https://nerdy.dev/6-css-snippets-every-front-end-developer-should-know-in-2025#view-transitions-for-page-navigation

not supported by Firefox yet.
no reason not to merge this.. transition between pages on Firefox will not benefit this feature and stay as is right now

Testing Instructions

• apply PR
• build css files from command line
• npm run build:css
• visit pages using Chrome, Edge or Safari

Actual result BEFORE applying this Pull Request

Screen.Recording.2025-07-25.at.22.06.45.mov

Expected result AFTER applying this Pull Request

a smooth transition between pages.

Screen.Recording.2025-07-25.at.22.07.39.mov

Link to documentations

Please select:

• Documentation link for docs.joomla.org:

• No documentation changes for docs.joomla.org needed

• Pull Request link for manual.joomla.org:

• No documentation changes for manual.joomla.org needed

[hans2103]

> joomla@6.0.0 lint:css
> stylelint --config build/.stylelintrc.json "administrator/components/com_media/resources/**/*.scss" "administrator/templates/**/*.scss" "build/media_source/**/*.scss" "build/media_source/**/*.css" "templates/**/*.scss" "installation/template/**/*.scss"


build/media_source/templates/site/cassiopeia/scss/blocks/_global.scss
 3:3  ✖  Unexpected unknown property "navigation"  property-no-unknown
 8:5  ✖  Unexpected unknown property "navigation"  property-no-unknown

2 problems (2 errors, 0 warnings)

Currently used stylelint is out of date. Since 16.13.0 'navigation' is a known property

[brianteeman]

You can combine the css

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

[richard67]

@hans2103 The stylelint update to 16.22.0 will be made with PR #45784 . If we don't want to break the SCSS lint in the 5.4-dev branch for a while, your PR here and the other one should not be merged before mine.

[JeroenMoolenschot]

I have tested this item ✅ successfully on 3f500df

---

_{This comment was created with the J!Tracker Application at issues.joomla.org/tracker/joomla-cms/45786.}

[RickR2H]

I have tested this item ✅ successfully on 3f500df

---

_{This comment was created with the J!Tracker Application at issues.joomla.org/tracker/joomla-cms/45786.}

[RickR2H]

RTC
Implementation is open for discussion and up to the Release managers

---

_{This comment was created with the J!Tracker Application at issues.joomla.org/tracker/joomla-cms/45786.}

[richard67]

The CSS linter (stylelint) is happy now as the composer updates have been merged up from 5.4-dev to 6.0-dev and the branch of this PR has been updated.

[Bodge-IT]

thanks @hans2103, slick! Thanks to testers for their time @RickR2H & @JeroenMoolenschot