Curtain / Panel Wipe

Una capa de introducción a pantalla completa con un logo o un contador se desliza o se desvanece para revelar el 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).

Al pasar el cursor, el fondo se abre o se cierra como unas persianas desde el centro o desde los bordes.

Añade un efecto hover "Shutter Fill" (también llamado shutter) en [dónde].
El nuevo color de fondo debe abrirse desde una línea vertical en el centro hacia ambos lados, como unas persianas, y cerrarse de nuevo hacia el centro cuando el cursor sale, mientras el color del texto cambia para seguir siendo legible: suave y rápido.
Mantén el relleno recortado dentro del elemento y el texto por encima, y muestra el mismo efecto con el foco del teclado.

Un clip-path o una máscara crece desde un borde o un punto y va descubriendo la imagen o el texto.

Añade un efecto de entrada "Clip Reveal" (también llamado mask reveal, wipe reveal o image reveal) en [dónde].
Un borde de recorte debe barrer de izquierda a derecha para ir descubriendo el contenido mientras este permanece quieto: fluido, con inicio y final suaves.
Reserva el espacio del elemento desde el principio para que nada se mueva, y muéstralo descubierto por completo si el usuario prefiere movimiento reducido (prefers-reduced-motion).

Una imagen queda al descubierto cuando una cubierta se encoge o el borde de una máscara se expande.

Añade un "Image Reveal Wipe" (también llamado mask reveal o clip-path reveal) en [dónde].
Cuando la imagen entre en pantalla al hacer scroll, una cubierta debe retirarse desde un lado y descubrirla con suavidad al ritmo del scroll, de modo que quede totalmente visible mucho antes de salir de la pantalla.
Reserva el espacio de la imagen para que el diseño no salte y muestra la imagen totalmente descubierta si el usuario prefiere movimiento reducido (prefers-reduced-motion).

El contenido saliente se desvanece por completo y luego el entrante aparece con un fundido y una ligera escala.

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.

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.