Backdrop Scrim Fade

Un diálogo aparece mientras crece ligeramente desde su centro sobre una página oscurecida.

Añade una animación "Modal Scale-Fade In" (también llamada dialog open animation o zoom-fade dialog) en [dónde].
El diálogo debe aparecer mientras crece ligeramente desde su centro y la página de detrás se oscurece: rápido y sutil, sin rebote.
Reprodúcela una vez cada vez que se abra el diálogo, mueve el foco a él y mantenlo dentro, y usa un simple fundido si el usuario prefiere movimiento reducido (prefers-reduced-motion).

Una miniatura se amplía desde su posición hasta una vista grande y centrada sobre un fondo oscurecido.

Añade un "Lightbox Zoom" (también llamado image zoom overlay o Medium-style zoom) en [dónde].
Al hacer clic en una miniatura, debe crecer con suavidad desde su propio lugar hasta una vista grande y centrada mientras la página de fondo se atenúa, y al cerrar debe encogerse de vuelta al mismo lugar.
Ciérralo con Escape o con un clic en el fondo, lleva el foco a la vista mientras esté abierta y devuélvelo a la miniatura después.

El elemento pasa de totalmente transparente a totalmente opaco en su sitio, o al revés al salir.

Añade una animación "Fade In / Fade Out" (también llamada fade) en [dónde].
El elemento debe pasar de totalmente transparente a totalmente visible en su sitio al aparecer, y desvanecerse igual al salir: suave, sin desplazamiento ni cambio de escala.
Cuando haya desaparecido, asegúrate de que ya no se pueda hacer clic en él ni llegar con el teclado, y cambia al instante 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ó.

Un panel sube desde el borde inferior, a menudo arrastrable y con alturas de anclaje.

Añade un "Bottom Sheet Slide-Up" (también llamado bottom drawer o sheet) en [dónde].
El panel debe subir desde el borde inferior mientras la página de detrás se oscurece, frenando con suavidad hasta su sitio y sin rebote.
Reprodúcelo una vez cada vez que se abra el panel, bájalo de nuevo al cerrarlo y mantén el foco del teclado dentro del panel mientras esté abierto.

Las diapositivas se quedan en su sitio y se funden unas con otras en lugar de deslizarse.

Añade un "Carousel Crossfade" (también llamado fade slideshow o carousel fade) en [dónde].
Las diapositivas deben quedarse en su sitio y fundirse lentamente unas con otras, desapareciendo la anterior mientras aparece la siguiente al mismo tiempo, y mantenerse unos segundos antes del siguiente cambio.
Vuelve a la primera diapositiva sin cortes, pausa al pasar el ratón o al recibir el foco, y no avances automáticamente si el usuario prefiere movimiento reducido (prefers-reduced-motion).

Las diapositivas se mueven en horizontal por una ventana visible y encajan de una en una.

Añade un carrusel ("Carousel Slide", también llamado slider o swipe carousel) en [dónde].
Cada paso debe deslizar la fila de lado para que la siguiente diapositiva encaje en el centro, suave y frenando, con las vecinas asomando por los bordes y los puntos de posición siguiendo el cambio.
Avanza de una en una, admite deslizar con el dedo además de botones y flechas del teclado, y pon etiquetas a los controles para los lectores de pantalla.