CSS Between the Pages
summary
Shows how to replace white flashes with real transitions using the View Transitions API: call document.startViewTransition to snapshot before/after states, style the snapshots with CSS pseudo elements like view-transition-old and view-transition-new, isolate regions by naming them to get independent layers, enable navigation-wide transitions with the meta tag view-transition: same-origin, respect prefers-reduced-motion for accessibility, and progressively enhance for Chromium browsers.
AI-written summary · about
chapters (14)
- 0:00CSS View Transitions intro
- 1:14View Transitions API importance
- 3:21Flash of white fix
- 5:51SPA transitions with API
- 7:34CSS layers for transitions
- 8:56Isolating transition elements
- 10:41Debugging transitions
- 11:26Entrance/exit animations
- 12:08Accessibility and motion
- 13:11Browser support & enhancement
- 13:53MPA transitions with meta tag
- 15:38Future of web transitions
- 17:23Frameworks vs performance
- 18:05Fun transition effects
related talks
21mCSS Between the Pages
10mView Transitions: The brand-new browser API that will blow your mind
32mSupercharge Web UX with View Transitions!
22mFLIP no more; Viva View Transitions
33mMaking A Splash With View Transitions
45mCSS tried to come for my Job
04mIntuitive Web Experiences with the View Transitions API
39mModern CSS for Creative Developers