Preloader Curtain Lift

Unos paneles sólidos barren la pantalla para cubrir la página anterior y luego se retiran para revelar la nueva.

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).

Un número cuenta desde un valor inicial hasta un valor objetivo cuando se vuelve visible.

Añade un contador animado (Number Ticker) en [dónde], también llamado count up o animated counter.
Cuando el número entre en pantalla, debe contar desde cero hasta su objetivo, rápido al principio y frenando con suavidad al llegar.
Usa dígitos de ancho fijo para que nada alrededor tiemble, cuenta una sola vez y da el valor final de inmediato a los lectores de pantalla y si el usuario prefiere movimiento reducido (prefers-reduced-motion).

El elemento se desliza más allá del borde de un contenedor y desaparece.

Añade una animación de salida "Slide Out" (también llamada slide out up o slide out down) en [dónde].
El elemento debe deslizarse más allá del borde de su contenedor y desaparecer, sin perder opacidad: rápido, acelerando al irse.
Recórtalo en el borde del contenedor, ocúltalo al teclado y a los lectores de pantalla cuando ya no esté a la vista, y ocúltalo al instante si el usuario prefiere movimiento reducido (prefers-reduced-motion).

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.

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.

Un elemento equivalente, como una miniatura, se transforma en posición y tamaño de una página a la siguiente.

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.

La nueva página entra deslizándose por un lado mientras la anterior sale, y la dirección sigue la profundidad de navegación.

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.