View Transitions API memungkinkan browser melakukan cross-fade, slide atau morph di antara dua keadaan visual, dan di browser modern hal ini dilakukan di seluruh halaman penuh dengan satu baris CSS dan satu atribut HTML. Tidak ada perpustakaan animasi yang terlihat, itulah yang membuat resep ini sangat enak.

Nyalakan dan beri nama potongannya

@view-transition { navigation: auto; }
<img src="/img/card-1.webp" style="view-transition-name: featured-photo" />

Sekarang foto yang sama pada dua halaman diperlakukan sebagai hal yang sama. Browser memindahkannya di antara keduanya. Tambahkan waktu Anda sendiri:

::view-transition-old(root) { animation-duration: 220ms; }
::view-transition-new(root) { animation-duration: 220ms; }

Dimana harus berhenti

  • Berikan view-transition-name hanya pada paling banyak beberapa elemen. Setiap elemen yang disebutkan adalah biaya koordinasi.
  • Jangan pernah memberi nama pada wadah yang bergulir. Ia akan melompat, dan lompatannya akan menjadi indah dalam cara yang paling buruk.
  • Interaksi yang mendorong URL harus dianimasikan. Interaksi yang menyimpan data tidak seharusnya. Transisi tidak relevan dengan apa yang harus ditunggu oleh pengguna.
Browser mengetahui cara membuat transisi lebih lancar daripada yang bisa dilakukan DOM.

Didukung di 92,9 persen browser saat ini, termasuk Firefox. Selebihnya, tidak ada yang ditampilkan dan tidak ada yang rusak — halaman dimuat persis seperti biasanya, dan itulah yang dilakukan oleh peningkatan progresif yang baik.