Tab Indicator Slide

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 fondo resaltado se desliza entre las tarjetas de una cuadrícula para seguir a la que está bajo el cursor.

Añade un "Card Hover Effect" (también llamado sliding highlight card grid) en [dónde].
Un fondo resaltado suave debe aparecer detrás de la tarjeta bajo el cursor y deslizarse con fluidez hasta la siguiente tarjeta a la que se mueva el cursor, desvaneciéndose cuando el cursor sale de la cuadrícula.
Haz que el foco del teclado mueva el resaltado de la misma forma y evita que las propias tarjetas se desplacen.

Un botón redondo se desliza por un carril y el color del carril cambia entre apagado y encendido.

Añade una animación "Toggle Switch" (también llamada switch) en [dónde].
Al activarlo o desactivarlo, el botón redondo debe deslizarse suavemente al otro extremo del carril mientras cambia el color del carril: rápido y nítido, sin rebote.
Que sea un interruptor accesible real (role="switch" con su estado checked) que también funcione con el teclado.

Una línea entra deslizándose desde el borde inferior o superior hasta su lugar para subrayar o sobrerrayar el elemento.

Añade un efecto hover "Underline Reveal" (también llamado overline reveal o reveal) en [dónde].
Una línea de ancho completo debe subir deslizándose hasta su lugar desde justo debajo del borde inferior mientras el cursor está sobre el elemento, y bajar de nuevo fuera de la vista cuando sale: rápido y suave.
Recorta la línea en el borde para que aparezca deslizándose y no con un fundido ni creciendo, y muestra el mismo efecto con el foco del teclado.

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.

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.