El módulo CSS View Transitions introduce una forma nativa de crear animaciones fluidas entre diferentes vistas de una aplicación web. A diferencia de soluciones basadas en JavaScript o librerías externas, esta especificación permite definir transiciones visuales directamente desde CSS, integrándose con la View Transition API del navegador.

El objetivo principal es mejorar la continuidad visual al cambiar de estado dentro de una página (SPA) o al navegar entre documentos del mismo origen (MPA), manteniendo un rendimiento óptimo y una implementación declarativa.

¿Qué es @view-transition?⌗

@view-transition es una CSS at-rule que permite a un documento participar en transiciones de vista cuando ocurre una navegación o un cambio de estado compatible. Su uso es especialmente relevante en transiciones cross-document, donde dos páginas distintas comparten una animación de entrada y salida.

Esta regla no define animaciones por sí sola, sino que habilita el contexto en el que el navegador genera pseudo-elementos especiales (::view-transition-*) que pueden ser animados con CSS.

@view-transition {
  navigation: auto | none;
  types: none | <custom-ident>#;
}

See the Pen CSS @view-transition example by Jorge Epuñan (@juanbrujo) on CodePen.

Propiedades⌗

  • navigation

    • auto: habilita automáticamente transiciones en navegaciones same-origin.
    • none: desactiva las transiciones de navegación.

  • types

    • Permite definir uno o más identificadores de tipo para personalizar transiciones específicas.
    • Estos tipos pueden ser utilizados junto a pseudo-clases como :active-view-transition-type().

Ejemplo:⌗

En cada página que participa en la transición se declara la regla:

@view-transition {
  navigation: auto;
}

Luego se definen animaciones usando los pseudo-elementos generados por el navegador:

@keyframes fade-out {
  to {
    opacity: 0;
    transform: translateY(-8px);
  }
}

@keyframes fade-in {
  from {
    opacity: 0;
    transform: translateY(8px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

::view-transition-old(root) {
  animation: fade-out 250ms ease forwards;
}

::view-transition-new(root) {
  animation: fade-in 250ms ease forwards;
}

Soporte actual en navegadores⌗

El soporte para CSS View Transitions ha avanzado rápidamente, pero aún no es completamente uniforme:

  • Chrome / Edge: Soporte estable para view transitions. Las transiciones cross-document están disponibles en versiones recientes.
  • Safari (macOS / iOS): Soporte incorporado a partir de Safari 18.
  • Firefox: Implementación progresiva en versiones recientes.
  • Fallback: En navegadores sin soporte, la navegación o el cambio de estado ocurre normalmente sin animación.

No existe actualmente una forma estandarizada de detectar soporte de @view-transition usando @supports.

Limitaciones técnicas⌗

  • Restricción de mismo origen: Las transiciones entre documentos solo funcionan si ambos pertenecen al mismo origen.
  • Control limitado del ciclo de vida: El navegador gestiona la captura y el renderizado de vistas, lo que limita el control fino en ciertos escenarios.
  • Compatibilidad parcial de types: Algunas características avanzadas aún no están disponibles en todos los navegadores.
  • Necesidad de fallback: Siempre se recomienda diseñar la experiencia considerando navegadores sin soporte.

Referencias⌗