View transitions, same document (document.startViewTransition)

Baseline 2025 (Chrome 111, Safari 18, Firefox 144). `:active-view-transition` Baseline Januar 2026. View-Transition-Typen: Chrome 125, Safari 18.2, Firefox 147.

Chrome 111Edge 111Safari 18Firefox 144

Wickle eine DOM-Änderung in `document.startViewTransition()` und der Browser animiert zwischen altem und neuem Zustand; Elemente mit demselben `view-transition-name` morphen zwischen ihren Positionen. Shared-Element-Transitions mit einer Zeile JS.

CSS

.fx-027-grid {
  display: flex;
  gap: 12px;
  margin-top: 12px
}
.fx-027-a,.fx-027-b {
  width: 80px;
  height: 80px;
  display: grid;
  place-items: center;
  border-radius: 12px;
  color: #fff;
  font: 700 24px system-ui
}
.fx-027-a {
  background: #2563eb;
  view-transition-name: fx-027-a
}
.fx-027-b {
  background: #ec4899;
  view-transition-name: fx-027-b
}
.fx-027.alt .fx-027-grid {
  flex-direction: row-reverse
}
::view-transition-group(*) {
  animation-duration: .4s
}
:root:active-view-transition .fx-027 button {
  pointer-events: none
}
.fx-027 :is(a,button,input,select,textarea):focus-visible { outline: 2px solid currentColor; outline-offset: 2px; }

HTML

<div class="fx-027">
  <button onclick="document.startViewTransition(()=>document.querySelector('.fx-027').classList.toggle('alt'))">Swap</button>
  <div class="fx-027-grid"><div class="fx-027-a">A</div><div class="fx-027-b">B</div></div>
</div>

Fallback: Rufe den Callback direkt auf, wenn `!document.startViewTransition`; die Änderung passiert ohne Animation.

Quelle: web.dev/blog/baseline-digest-jan-2026 and https://developer.mozilla.org/en-US/docs/Mozilla/Firefox/Releases/144

Prompt

Animiere Zustandswechsel mit der View Transition API: gib jedem Element, das morphen soll, einen eindeutigen `view-transition-name`, wickle das DOM-Update in `document.startViewTransition(() => update())` (mit einem einfachen Aufruf als Fallback) und stimme die Bewegung über `::view-transition-old/new(name)` und `::view-transition-group(*) { animation-duration }` ab. Nutze `:root:active-view-transition`, um Interaktion während des Ablaufs zu deaktivieren.