Slide In

El elemento aparece mientras se desplaza una distancia corta desde un lado hasta su posición final.

Añade una animación de entrada "Fade In Directional" (también llamada fade in left, fade in right o fade in down) en [dónde].
El elemento debe aparecer mientras se desplaza una distancia corta desde un lado hasta su posición final: rápido y fluido, frenando al llegar, sin rebote.
Reprodúcela una sola vez y muestra el elemento en su lugar sin movimiento si el usuario prefiere movimiento reducido (prefers-reduced-motion).

El elemento sube una distancia corta mientras aparece, como si se asentara en su lugar.

Añade una animación de entrada "Fade Up" (también llamada fade-in-up o reveal on scroll) en [dónde].
Los elementos deben subir ligeramente mientras aparecen la primera vez que entran en pantalla al hacer scroll: sutil y rápido, sin rebote.
Reprodúcela una sola vez y omite el movimiento si el usuario prefiere movimiento reducido (prefers-reduced-motion).

El elemento entra disparado desde un lado con una inclinación que se endereza al llegar.

Añade una animación de entrada "Light Speed In" (también llamada lightspeed in) en [dónde].
El elemento debe entrar muy rápido desde un lado, inclinado como si fuera a toda velocidad, corregir de más la inclinación una vez y enderezarse al llegar: rápido e impactante, frenando al final.
Evita que genere una barra de desplazamiento horizontal mientras sigue fuera de la pantalla, y muéstralo en su sitio sin movimiento si el usuario prefiere movimiento reducido (prefers-reduced-motion).

Un panel lateral entra deslizándose desde el borde izquierdo, derecho o superior, empujando o cubriendo el contenido.

Añade un "Drawer Slide" (también llamado off-canvas o side sheet) en [dónde].
El panel debe entrar deslizándose desde el borde lateral sobre el contenido mientras la página de detrás se oscurece, rápido y frenando con suavidad, y salir igual al cerrarse.
Mantén el foco del teclado dentro del panel abierto, ciérralo con Escape o con un clic en la zona oscurecida, y devuelve el foco al botón que lo abrió.

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

Los elementos de un grupo se animan uno tras otro con un pequeño retraso, formando una ola en lugar de aparecer todos a la vez.

Añade una animación "Stagger" (también llamada staggered animation o cascada) en [dónde].
Los elementos deben aparecer subiendo uno tras otro con un retraso corto y uniforme, para que el grupo se vea como una ola rápida y no todos a la vez.
Mantén la secuencia breve aunque la lista sea larga, reprodúcela una sola vez al entrar en pantalla y omite el movimiento si el usuario prefiere movimiento reducido (prefers-reduced-motion).

El elemento gira y crece desde un punto mientras aparece.

Añade una animación de entrada "Swirl In" (también llamada swirl in forward) en [dónde].
El elemento debe girar bastante más de una vuelta completa mientras crece desde un solo punto hasta su tamaño completo y aparece: rápido al principio, frenando al asentarse.
Reprodúcela una sola vez en un único elemento en lugar de en todo un grupo, y muéstralo en su sitio sin movimiento si el usuario prefiere movimiento reducido (prefers-reduced-motion).