Component & Layout

Un panel de contenido crece con suavidad hasta su altura completa o se reduce a cero al alternar su encabezado.

Añade un acordeón ("Accordion Expand-Collapse", también llamado collapse o disclosure) en [dónde].
Al pulsar un encabezado, su panel debe crecer con suavidad hasta la altura completa de su contenido y volver a cerrarse del todo con la siguiente pulsación, con la flecha del encabezado girando a la vez: rápido y suave, sin rebote.
Anima hasta la altura real del contenido en lugar de una altura fija estimada, haz que el encabezado sea un botón real que indique si está expandido y que funcione con el teclado.

Una capa oscura translúcida aparece detrás de una superposición para oscurecer la página.

Añade un "Backdrop Scrim Fade" (también llamado overlay fade o scrim) en [dónde].
Cuando se abra la superposición, una capa oscura translúcida debe aparecer suavemente sobre la página de detrás, un poco más despacio que la propia superposición, y desvanecerse de nuevo al cerrarse.
Mantén el scrim oscuro tanto en el tema claro como en el oscuro, y evita que la página de detrás se desplace o reciba clics mientras se muestra.

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.

Una tarjeta crece hasta convertirse en una vista de detalle completa, manteniendo un único contenedor visible que cambia de forma y revela contenido nuevo.

Añade una transición "Container Transform" (también llamada card expand to detail o expandable card) en [dónde].
Al abrir la tarjeta, el mismo contenedor debe crecer con suavidad hasta la vista de detalle completa: su contenido anterior se desvanece rápido y el nuevo aparece cuando casi ha terminado de crecer; al cerrar se reproduce a la inversa.
Mantenlo como un único contenedor continuo en lugar de un fundido entre dos cajas separadas, y mueve el foco a la vista de detalle al abrirse.

Al arrastrar un elemento, los demás se apartan deslizándose y se colocan en el nuevo orden.

Añade una lista de arrastrar para reordenar ("Drag-to-Reorder List", también llamada sortable list) en [dónde].
El elemento arrastrado debe seguir el puntero directamente y elevarse un poco, mientras los demás se apartan deslizándose con suavidad; al soltarlo debe asentarse rápido en el hueco más cercano.
Admite táctil además de ratón, y ofrece una forma de mover elementos con el teclado que anuncie la nueva posición a los lectores de pantalla.

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

Los elementos se deslizan con suavidad a sus nuevas posiciones y tamaños después de un cambio de diseño.

Añade una "FLIP Layout Animation" (también llamada layout animation o First-Last-Invert-Play) en [dónde].
Cuando cambie el diseño, cada elemento debe deslizarse de su posición anterior a la nueva en lugar de saltar, rápido al principio y asentándose con suavidad.
Anima solo con transforms para que la página no recalcule el diseño en cada fotograma, y pasa directamente al nuevo diseño si el usuario prefiere movimiento reducido (prefers-reduced-motion).

Los elementos aparecen deslizándose al añadirse y salen animados al eliminarse mientras los vecinos cierran el hueco.

Añade una animación "List Item Enter/Exit" (también llamada animated list) en [dónde].
Un elemento nuevo debe abrir primero su espacio y luego aparecer deslizándose; un elemento eliminado debe desvanecerse primero y luego plegarse para que sus vecinos cierren el hueco con suavidad.
Mantén el elemento eliminado en su sitio hasta que termine su salida, para que la lista nunca salte al añadir o quitar elementos.

Una fila de contenido se desliza de lado en un bucle infinito y sin cortes.

Añade un "Marquee" (un desplazamiento horizontal infinito, también llamado ticker o marquesina) en [dónde].
El contenido debe desplazarse de derecha a izquierda a una velocidad lenta y constante, en un bucle continuo sin saltos visibles.
Páusalo al pasar el ratón por encima y detén el movimiento si el usuario prefiere movimiento reducido (prefers-reduced-motion).

Las piezas de la cuadrícula se reordenan, se desvanecen o se deslizan a nuevas posiciones al aplicar un filtro u orden.

Añade un efecto "Masonry / Grid Shuffle" (también llamado filterable grid animation) en [dónde].
Al aplicar un filtro, las piezas que ya no coincidan deben encogerse y desvanecerse en su sitio mientras las restantes se deslizan con suavidad a sus nuevas posiciones; al quitar el filtro se reproduce a la inversa.
Evita que la página de alrededor salte mientras cambia la altura de la cuadrícula, y haz que los controles de filtro sean botones reales que indiquen qué filtro está seleccionado.

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

Un menú flotante aparece con un fundido y una ligera escala desde el punto donde está su disparador.

Añade una animación de menú desplegable ("Popover / Dropdown Open", también llamada menu pop o dropdown scale-fade) en [dónde].
El menú debe aparecer con un fundido mientras crece ligeramente desde la esquina junto a su disparador, rápido y nítido, y desaparecer un poco más rápido al cerrarse.
Mantenlo anclado al disparador, ciérralo con Escape o con un clic fuera y expón el estado abierto en el disparador para los lectores de pantalla.

Un elemento parece moverse y cambiar de tamaño hasta un elemento equivalente en otro lugar, como si fueran uno solo.

Añade una "Shared Layout Animation" (también llamada shared element dentro de la página) en [dónde].
Cuando cambie la selección, el elemento debe parecer moverse y cambiar de tamaño con suavidad desde su posición anterior a la nueva, asentándose con delicadeza, para que se lea como un solo objeto y no como dos.
Muestra solo una copia en cada momento y evita que el diseño de alrededor salte mientras se mueve.

Un subrayado o una píldora se desliza de la pestaña anterior a la recién seleccionada.

Añade un "Tab Indicator Slide" (también llamado sliding underline o active tab indicator) en [dónde].
Al seleccionar una pestaña nueva, el subrayado debe deslizarse de la pestaña anterior a la nueva, rápido y desacelerando con suavidad, y estirarse al ancho de la nueva pestaña si es distinto.
Mantén la semántica correcta de pestañas con navegación por flechas del teclado y mueve el indicador sin deslizarlo si el usuario prefiere movimiento reducido (prefers-reduced-motion).

Un mensaje breve se desliza o aparece en un borde de la pantalla, espera y luego se va; los toasts apilados se desplazan para hacer sitio.

Añade un "Toast Slide-In" (también llamado snackbar o toast notification) en [dónde].
Cada mensaje debe subir desde el borde de la pantalla y aparecer con un fundido, desacelerando con suavidad; cuando llegue un toast nuevo, los que ya se muestran deben desplazarse con suavidad para hacerle sitio.
Anuncia el mensaje a los lectores de pantalla sin robar el foco, déjalo visible el tiempo suficiente para leerlo y pausa el cierre automático al pasar el ratón o al enfocarlo.

Una pequeña etiqueta aparece con un fundido y se acomoda junto a un elemento tras una breve espera al pasar el ratón.

Añade un "Tooltip Fade" (también llamado tooltip reveal) en [dónde].
Tras una breve espera al pasar el ratón, la etiqueta debe aparecer con un fundido acomodándose ligeramente junto al elemento, y desaparecer rápido y sin espera cuando el puntero se aleje.
Muéstralo también con el foco del teclado, deja que Escape lo cierre y vincúlalo al elemento para que los lectores de pantalla lo lean.