`@view-transition (tranziții între pagini)` în CSS

Reguli @ (at-rules) Chrome 126, Safari 18.2 (Firefox: încă nu)

Animă trecerea de la o pagină la alta a aceluiași site, fără JavaScript, cu o simplă regulă CSS pe ambele pagini.

Sintaxă CSS

@view-transition {
  navigation: auto;
}

Ce face `@view-transition (tranziții între pagini)`

Când vizitatorul trece de la o pagină la alta pe același site (același origin), browserul afișează de obicei un ecran nou brusc. Cu @view-transition { navigation: auto; } pus pe ambele pagini, browserul face în schimb o tranziție animată: implicit, o estompare încrucișată (cross-fade) între pagina veche și cea nouă.

Animația se personalizează prin pseudo-elementele ::view-transition-old(root) (instantaneul paginii vechi) și ::view-transition-new(root) (pagina nouă), cărora le dai propriile @keyframes. Pentru elemente care „zboară” dintr-o pagină în alta (de exemplu poza unui produs), vezi view-transition-name.

Suport: Chrome 126+ și Safari 18.2+; Firefox suportă tranzițiile din aceeași pagină, dar nu încă regula @view-transition pentru navigări. Unde nu e suportată, navigarea rămâne cea obișnuită, deci poți adăuga regula fără risc.

Valori uzuale

Valoare	Descriere
`navigation: auto`	Activează tranziția pentru navigările în același site (linkuri, înapoi/înainte).
`navigation: none`	Valoarea implicită: fără tranziție.
`::view-transition-old(root)`	Imaginea paginii vechi, care dispare.
`::view-transition-new(root)`	Pagina nouă, care apare.

Exemple

Exemplul 1: Tranziție implicită între paginile unui blog

Aceeași regulă pusă în fișierul CSS comun tuturor paginilor.

@view-transition {
  navigation: auto;
}

Efect vizual în browser

La clic pe articolul „Ce vizitezi în Iași într-un weekend”, pagina listei se estompează lin în pagina articolului, în loc să fie înlocuită brusc. În Firefox navigarea rămâne instantanee, fără eroare.

Exemplul 2: Glisare laterală, dezactivată pentru cine preferă mai puțină mișcare

Pagina veche iese spre stânga, cea nouă intră din dreapta; utilizatorii cu „reducere mișcare” activată primesc navigarea normală.

@media (prefers-reduced-motion: no-preference) {
  @view-transition {
    navigation: auto;
  }
}

@keyframes iese-stanga { to { transform: translateX(-100%); } }
@keyframes intra-dreapta { from { transform: translateX(100%); } }

::view-transition-old(root) {
  animation: iese-stanga 0.35s ease-in both;
}
::view-transition-new(root) {
  animation: intra-dreapta 0.35s ease-out both;
}