Motion can show that a case card moved or a panel opened, but it cannot become the only way to understand the change. This track uses a case-review board with moving cards, a detail route, and an expandable activity panel. It separates CSS state transitions from scripted timelines, then treats route changes, reduced-motion preferences, focus, and frame cost as one user contract. The final state must be correct when an animation is skipped, cancelled, interrupted, or unsupported.
Topics in this track
- CSS Motion State and Interruption — Tie transitions to semantic state and make interruption settle on the current state.
- Web Animations Lifecycle and Cancellation — Own scripted animation handles so retries and component disposal cannot leave stale effects.
- View Transition Navigation, Focus, and Fallback — Treat visual route continuity as an enhancement while preserving navigation and reading position.
- Reduced Motion and Rendering Budget — Replace nonessential travel with stable state cues and verify frame cost on real screens.
Prerequisite paths
CSS Layout and Interface Systems; Complex Accessible Interactions.
Neighbor track
Multi-Region Web State and Recovery.
Practice path
Build Project: case board motion and route continuity and check decisions in Web Development: motion and regional state decisions quiz.