Pop

El elemento cambia de escala con un rebote elástico que se pasa un poco al empezar o terminar el hover.

Añade un efecto hover "Bounce Scale" (también llamado bounce in / out) en [dónde].
El elemento debe agrandarse un poco con un rebote elástico visible, pasándose brevemente de su tamaño final antes de asentarse, y volver con el mismo rebote cuando el cursor sale.
Evita que el diseño de alrededor se desplace y muestra el mismo efecto con el foco del teclado.

El elemento se agranda ligeramente y con suavidad cuando el cursor está encima.

Añade un efecto hover "Grow" (también llamado scale up) en [dónde].
El elemento debe agrandarse ligeramente y con suavidad mientras el cursor está encima, y volver a su tamaño cuando sale: rápido y sutil.
Evita que el diseño de alrededor se desplace y muestra el mismo efecto con el foco del teclado.

El elemento cambia de tamaño con un ritmo de doble latido, como un corazón que late.

Añade un efecto "Heartbeat" (también llamado heart beat) en [dónde].
El elemento debe hincharse y relajarse en un doble latido rápido y luego descansar un momento antes del siguiente, como un corazón que late.
Repítelo en bucle sin cortes manteniendo la pausa entre latidos, y detenlo si el usuario prefiere movimiento reducido (prefers-reduced-motion).

Un indicador numérico aparece de golpe, rebota o late cuando llega una nueva notificación.

Añade una animación "Notification Badge Bounce" (también llamada badge pop o ping) en [dónde].
Cuando llegue una nueva notificación, el indicador numérico debe aparecer desde la nada y asentarse con un par de rebotes rápidos y elásticos mientras un anillo suave se expande desde él una vez.
Reprodúcela una vez por cada notificación nueva en lugar de en bucle, y anuncia el nuevo número a los lectores de pantalla.

El elemento se hunde hacia dentro y vuelve, como si se pulsara un botón físico.

Añade un efecto hover "Push" en [dónde].
Cada vez que entre el puntero, el elemento debe encogerse una vez rápidamente y recuperar su tamaño normal con un rebote, como si se pulsara un botón físico.
Reprodúcelo una vez por hover en lugar de repetirlo en bucle, y evita que el diseño de alrededor se desplace.

Al pasar el cursor, un círculo de color crece desde el centro o se contrae hacia él para rellenar el elemento.

Añade un efecto hover "Radial Fill" (también llamado circle expand) en [dónde].
Un círculo del nuevo color debe crecer suavemente desde el centro hasta llenar el elemento, y encogerse de vuelta hacia el centro cuando salga el puntero, mientras el color del texto cambia para seguir siendo legible.
Mantén el círculo recortado dentro de la forma del elemento y el texto por encima, y muestra el mismo efecto con el foco del teclado.

Al pasar el cursor, un rectángulo se expande o se contrae dentro del elemento para cambiar su fondo.

Añade un efecto hover "Rectangle Fill" en [dónde].
El nuevo color de fondo debe cerrarse desde los cuatro bordes a medida que un rectángulo interior se encoge hacia el centro, y volver a abrirse cuando salga el puntero, mientras el color del texto cambia para seguir siendo legible: suave y rápido.
Mantén el texto por encima del relleno y muestra el mismo efecto con el foco del teclado.