CSS Between the Pages
summary
Claims that the View Transitions API lets pages capture start and end DOM snapshots and animate between them are demonstrated with real code: using document.startViewTransition produces a default crossfade, naming regions gives per-element layers, and custom CSS masks produce blinds and spiral wipes that actually run. Accessibility respects prefers-reduced-motion. Multi-page transitions work via a meta tag meta name="view-transition" content="same-origin" (Chromium-flag experimental). Code-quality tools named are SonarLint / SonarQube/SonarCloud.
AI-written summary · about
chapters (15)
- 0:00View Transitions API intro
- 1:14Need for view transitions
- 3:21API under the hood
- 5:51Single-page app transitions with JavaScript
- 7:34Custom animations via CSS
- 8:56Isolating animated elements
- 10:41Debugging in DevTools
- 11:26Entrance/exit animations
- 12:06Accessibility & motion
- 13:08Browser support & enhancement
- 13:52MPA transitions with meta tag
- 15:38Future of web dev
- 17:23Frameworks vs simple solutions
- 18:05Fun CSS transitions
- 20:11Conclusion
related talks
21mCSS Between the Pages
10mView Transitions: The brand-new browser API that will blow your mind
32mSupercharge Web UX with View Transitions!
39mModern CSS for Creative Developers
45mCSS tried to come for my Job
22mFLIP no more; Viva View Transitions
04mIntuitive Web Experiences with the View Transitions API
33mMaking A Splash With View Transitions