También llamado Clip-path circle expand, Theme toggle reveal
La nueva vista se revela dentro de un círculo que se expande desde el punto del clic.
Se usa en
Cambio de tema claro/oscuro, cambio de página
Añade una transición "Circular Reveal" (también llamada clip-path circle expand o theme toggle reveal) en [dónde].
La nueva vista debe aparecer dentro de un círculo que crece desde el control pulsado hasta cubrir toda el área: suave y constante, acelerando y frenando con suavidad.
Haz que el círculo empiece justo donde se pulsó el control y cambia al instante, sin círculo, si el usuario prefiere movimiento reducido (prefers-reduced-motion).
También llamado Cross-dissolve, Fade transition, Root cross-fade, Cross-Document View Transition, MPA view transition, @view-transition navigation auto
La página anterior se desvanece mientras la nueva aparece con un fundido en la misma área.
Se usa en
Cambio de ruta por defecto
Añade una "Crossfade Page Transition" (también llamada cross-dissolve o fade transition) en [dónde].
Al navegar, la página anterior debe desvanecerse mientras la nueva aparece a la vez en la misma área: suave y bastante rápida.
Mantén ambas páginas en el mismo lugar para que nada se desplace durante el fundido y mueve el foco al título principal de la nueva página tras el cambio.
También llamado Page wipe, Curtain reveal, Stripe transition, Staggered panels
Unos paneles sólidos barren la pantalla para cubrir la página anterior y luego se retiran para revelar la nueva.
Se usa en
Navegación en sitios de portafolio y agencias
Añade una transición de página "Curtain / Panel Wipe" (también llamada page wipe o staggered panels) en [dónde].
Unos paneles sólidos deben barrer la pantalla uno tras otro para cubrir la página anterior, la página debe cambiar mientras está totalmente cubierta y los paneles deben seguir hasta salir de la vista para revelar la nueva: contundente y fluida.
No muestres nunca la nueva página antes de que los paneles cubran la anterior y usa un simple fundido si el usuario prefiere movimiento reducido (prefers-reduced-motion).
También llamado Fade-through transition, Out-In Route Transition, Wait mode, mode="wait", mode="out-in"
El contenido saliente se desvanece por completo y luego el entrante aparece con un fundido y una ligera escala.
Se usa en
Cambiar entre destinos sin relación entre sí
Añade una transición de página "Fade Through" (también llamada fade-through transition u out-in route transition) en [dónde].
Primero, el contenido saliente debe desvanecerse rápido y por completo; después, el entrante debe aparecer con un fundido mientras crece ligeramente hasta su lugar.
No dejes nunca que ambos se superpongan y evita que el diseño del contenido entrante se desplace mientras escala.
También llamado Splash screen, Intro loader
Una capa de introducción a pantalla completa con un logo o un contador se desliza o se desvanece para revelar el sitio.
Se usa en
Primera carga del sitio
Añade un "Preloader Curtain Lift" (también llamado splash screen o intro loader) en [dónde].
Una capa de introducción a pantalla completa debe mantenerse mientras se llena una barra de carga y luego subir y salir con suavidad para revelar el sitio, que se asienta con delicadeza debajo.
Reprodúcelo solo en la primera carga, no retengas nunca la página más de lo que tarda la carga real y omítelo si el usuario prefiere movimiento reducido (prefers-reduced-motion).
También llamado Shared axis X/Y/Z
El contenido saliente y el entrante se mueven juntos a lo largo del eje X, Y o Z con fundidos para mostrar su relación espacial.
Se usa en
Pasos de asistentes, navegación entre hermanos, navegación en profundidad
Añade una transición de página "Shared Axis" (también llamada shared axis X/Y/Z) en [dónde].
Al avanzar, el contenido anterior debe deslizarse un poco hacia un lado y desvanecerse rápido mientras el nuevo entra desde el otro lado y aparece justo después; al retroceder, la dirección se invierte.
Mantén el recorrido corto para que solo sugiera la dirección y ajusta el eje a la navegación: lateral para hermanos, vertical para pasos, profundidad para entrar en detalle.
También llamado Hero transition, View Transition shared element, view-transition-name morph
Un elemento equivalente, como una miniatura, se transforma en posición y tamaño de una página a la siguiente.
Se usa en
De miniatura a página de detalle
Añade una transición de elemento compartido ("Shared Element Transition", también llamada hero transition o view-transition-name morph) en [dónde].
Al pasar a la página siguiente, el elemento equivalente, como una miniatura, debe moverse y crecer con suavidad hasta su lugar en la nueva página mientras el resto del contenido hace un fundido cruzado, y encogerse de vuelta al regresar.
Da a los elementos equivalentes de ambas páginas una misma identidad compartida para que se emparejen bien y recurre a un simple fundido cruzado cuando el navegador no pueda transformarlos.También llamado Push / pop, Directional slide, Slide-over route
La nueva página entra deslizándose por un lado mientras la anterior sale, y la dirección sigue la profundidad de navegación.
Se usa en
Navegación de avance/retroceso al estilo móvil
Añade una "Slide Page Transition" (también llamada push / pop o directional slide) en [dónde].
Al avanzar, la nueva página debe entrar empujando desde el lado mientras la anterior sale por el otro; al retroceder, ambas deben moverse en la dirección opuesta: suave, acelerando y frenando con suavidad.
Vincula la dirección a la profundidad de navegación, incluido el botón Atrás del navegador, y evita que la página se desplace de lado durante el deslizamiento.
También llamado Scale transition, Zoom in / out
La página anterior se amplía o se reduce y se desvanece mientras la nueva escala hasta su lugar.
Se usa en
Entrar o salir de una jerarquía
Añade una "Zoom Page Transition" (también llamada scale transition o zoom in / out) en [dónde].
Al entrar en detalle, la página anterior debe ampliarse un poco y desvanecerse mientras la nueva crece desde un tamaño algo menor hasta su lugar; al volver, el zoom debe ir en sentido contrario: suave y rápido.
Mantén la escala sutil para que el contenido siga legible en todo momento y usa un simple fundido si el usuario prefiere movimiento reducido (prefers-reduced-motion).