Heartbeat

El elemento se agranda o se atenúa suavemente, una y otra vez.

Añade un efecto "Pulse" (también llamado pulsing) en [dónde].
El elemento debe crecer suavemente y volver con un ritmo lento y constante: sutil, sin rebote.
Repítelo en bucle sin cortes y sin mover el diseño de alrededor, y detenlo si el usuario prefiere movimiento reducido (prefers-reduced-motion).

Un icono de corazón se rellena de color y lanza pequeñas partículas o late al hacer clic.

Añade una animación "Like / Heart Burst" (también llamada heart animation o favorite toggle) en [dónde].
Al marcar me gusta, el corazón debe llenarse de color y dar un salto elástico mientras un anillo y pequeños puntos estallan hacia fuera y se desvanecen, todo rápido y juguetón; al desmarcarlo, el corazón solo se vacía en silencio.
Que sea un botón de alternancia real con su estado pulsado, y reproduce el estallido solo al activarlo.

El elemento se agranda, se sacude girando un poco y vuelve a su tamaño, como una pequeña celebración.

Añade un efecto de atención "Tada" en [dónde].
El elemento debe encogerse un poco, luego crecer y sacudirse de lado a lado con una inclinación rápida antes de volver a su tamaño normal, como una pequeña celebración.
Reprodúcelo una vez, por ejemplo justo después de un éxito, y omítelo si el usuario prefiere movimiento reducido (prefers-reduced-motion).

El elemento se agranda rápidamente y vuelve a su tamaño con un rebote elástico.

Añade un efecto hover "Pop" en [dónde].
Cada vez que entre el puntero, el elemento debe hincharse una vez rápidamente y volver a su tamaño normal, como un pequeño rebote elástico.
Reprodúcelo una vez por hover en lugar de mantener el tamaño mayor o repetirlo en bucle, y evita que el diseño de alrededor se desplace.

El elemento se inclina de un lado a otro con una amplitud cada vez menor, como una gelatina que tiembla.

Añade un efecto de atención "Jello" (también llamado jelly) en [dónde].
El elemento debe inclinarse de un lado a otro como una gelatina que tiembla: fuerte al principio y asentándose rápido hasta quedar quieto.
Reprodúcelo una vez al activarse y conserva el espacio que ocupa el elemento para que el contenido cercano no se desplace.

Una copia del elemento se agranda y se desvanece una y otra vez, como la onda de un radar.

Añade un efecto "Ping" (también llamado radar ping o pulse ring) en [dónde].
Una copia del elemento debe crecer hacia fuera y desvanecerse, una y otra vez a un ritmo constante, mientras el elemento en sí se queda quieto.
Dibuja el anillo en una capa aparte para que nunca cambie el diseño, y detén el bucle si el usuario prefiere movimiento reducido (prefers-reduced-motion).