View transitions, same document (document.startViewTransition)

Baseline 2025 (Chrome 111, Safari 18, Firefox 144). `:active-view-transition` Baseline em janeiro de 2026. Tipos de view transition: Chrome 125, Safari 18.2, Firefox 147.

Chrome 111Edge 111Safari 18Firefox 144

Envolva uma mudança de DOM em `document.startViewTransition()` e o navegador anima entre os estados antigo e novo; elementos com o mesmo `view-transition-name` se transformam entre posições. Transições de elemento compartilhado com uma linha de 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: Chame o callback diretamente quando `!document.startViewTransition`; a mudança acontece sem animação.

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

Prompt

Anime mudanças de estado com a View Transition API: dê a cada elemento que deve se transformar um `view-transition-name` único, envolva a atualização do DOM em `document.startViewTransition(() => update())` (com uma chamada simples como fallback), e ajuste o movimento via `::view-transition-old/new(name)` e `::view-transition-group(*) { animation-duration }`. Use `:root:active-view-transition` para desabilitar a interação enquanto roda.