Modal Scale-Fade In

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.

El elemento crece desde un estado pequeño y transparente hasta su tamaño completo mientras aparece.

Añade una animación de entrada "Zoom In" (también llamada scale in) en [dónde].
El elemento debe crecer de pequeño y transparente a su tamaño completo mientras aparece: rápido y suave, sin pasarse de tamaño.
Escálalo desde su centro sin afectar al diseño que lo rodea, y muéstralo en su sitio sin movimiento 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.

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