List Item Enter/Exit

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

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.

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

Deslizar una fila de la lista hacia un lado muestra botones de acción como eliminar o archivar.

Añade una interacción "Swipe to Delete" (también llamada swipe actions o swipe to reveal) en [dónde].
Al arrastrar una fila hacia un lado, debe moverse directamente con el dedo para descubrir detrás botones de acción como archivar y eliminar, deteniéndose cuando se ven por completo, y al soltar se desliza con suavidad a su sitio sin rebote.
Mantén el scroll vertical funcionando mientras se desliza en horizontal, y haz que las mismas acciones sean accesibles con teclado y lector de pantalla sin deslizar.

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

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