CSS just killed React Router (animate between HTML pages)
CSS can now animate between completely separate HTML pages no JavaScript, no React router, no SPA.
All of this works with plain HTML files and one shared CSS file. Zero frameworks.
⚙️ What you'll learn:
• @view-transition rule and how to enable it
• The 3 pseudo-elements: ::view-transition-group, ::view-transition-old, ::view-transition-new
• Named transition groups to isolate specific sections
• Shared element transitions with view-transition-name
• Accessibility: wrapping everything in prefers-reduced-motion
• Browser support: Chrome, Edge, Safari ✓ — Firefox (not yet)
⬇️ Download the demo files: https://github.com/aziz-chniti/view-t...
⏱ Timestamps:
0:00 What we're building
0:23 Enable transitions in 2 lines
1:00 Custom slide animation
1:46 Keep the nav fixed
2:35 Shared image morph
3:17 Caveats & browser support
4:59 Recap
#CSS #WebDev #Frontend #CSSAnimation #ViewTransitions #WebAnimation #JavaScript #HTML #CodingTutorial #Programming #WebDesign #ModernCSS #NoFramework #FrontendDev #CSSOnly