Skip to content
AITroveRead. Build. Understand.
Reading list
Make this comfortable

CSS view-transition snapshots: animate presentation, then restore interaction

Last updated: 5 Oct 20265 min read
tutorial
BeginnerBy AITrove Editorial

During a named view transition, ::view-transition-old(name) and ::view-transition-new(name) represent visual snapshots of the matching old and new states. Animation on those pseudo-elements changes the temporary image, not the underlying document semantics. The application still owns the DOM update, focus, and the state shown after the transition finishes.

When to use it

A selected case moves from an overview tile into a detail sheet. The old snapshot fades while the new snapshot arrives; a reduced-motion query removes those animations. The detail sheet must be fully usable immediately if the transition API is unsupported or the transition is skipped because names collide. Avoid a long crossfade over live controls: a visual copy of a button can appear clickable while the actual focus target is elsewhere. Test keyboard focus before and after the update, rapid back navigation, interrupted transitions, and the reduced-motion setting. A pure opacity change is appropriate only when the content remains understandable in both states. If the view change also replaces an error message, announce that message through the application's ordinary accessible status pattern, not through motion.

css
::view-transition-old(selected-case) { animation: case-exit 180ms ease-in both; }
::view-transition-new(selected-case) { animation: case-enter 180ms ease-out both; }
@keyframes case-exit { to { opacity: 0; } }
@keyframes case-enter { from { opacity: 0; } }
@media (prefers-reduced-motion: reduce) { ::view-transition-old(selected-case), ::view-transition-new(selected-case) { animation: none; } }

Cost and verification

Snapshots can require extra image memory and paint work, especially when the chosen element includes large media or expensive effects. Keep the scope narrow and profile a real device. Animation does not repair an invalid element-name mapping, a missing DOM update, or lost focus. The reduced-motion rule removes the authored fades; verify the target browser's default transition treatment as well. A brief visual transition is useful only when it helps maintain place without delaying the new content. Do not hide the detail sheet until animation end just to make the effect look complete.

Common Mistakes

  • Do not confuse visual snapshots with interactive DOM elements.
  • Do not animate every case card when only one changes.
  • Do not leave focus on a removed overview control.

Connected lessons

css
reference
web
Storage details