Notification Badge Bounce

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

El elemento da saltos arriba y abajo que van perdiendo fuerza.

Añade un efecto de atención "Bounce" en [dónde].
El elemento debe saltar hacia arriba y volver a caer en unos cuantos rebotes rápidos, cada vez más pequeños, con un ligero aplastamiento al aterrizar.
Reprodúcelo una sola vez al activarse en lugar de en bucle, y omítelo para los usuarios que prefieren movimiento reducido.

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.

La imagen del producto se encoge y vuela en arco hasta el icono del carrito.

Añade una animación "Add to Cart Fly" (también llamada fly to cart o add-to-cart animation) en [dónde].
Al pulsar el botón de añadir, una pequeña copia de la imagen del producto debe encogerse mientras vuela en un arco suave y rápido hasta el icono del carrito, y el carrito debe dar un pequeño salto al actualizar su contador.
Reprodúcela una vez por pulsación sin mover la tarjeta original del producto, y omite el vuelo si el usuario prefiere movimiento reducido (prefers-reduced-motion), pero actualiza igualmente el carrito.

Un icono de ojo cambia entre abierto y tachado al mostrar u ocultar la contraseña.

Añade un botón para mostrar/ocultar contraseña (Password Reveal Toggle) (también llamado show/hide password o eye icon toggle) en [dónde].
Al pulsar el ojo, su barra debe borrarse rápido mientras los puntos ocultos se funden con los caracteres reales, y al volver a pulsar la barra se dibuja de nuevo y los oculta: suave y rápido, sin rebote.
Mantén fijo el ancho del campo para que el texto no salte, y haz que el botón sea un botón real cuya etiqueta indique si la contraseña está visible.

Una flecha de puntero dibuja un recuadro de resaltado alrededor de una palabra cuando el texto entra en pantalla.

Añade un efecto "Pointer Highlight" en [dónde].
Cuando el texto entre en pantalla al hacer scroll, un recuadro debe dibujarse alrededor de la palabra clave de izquierda a derecha mientras una pequeña flecha de puntero recorre su esquina, suave y constante, como si alguien marcara la palabra a mano.
Dibújalo solo la primera vez que aparece sin desplazar el texto, y muestra el recuadro terminado de inmediato si el usuario prefiere movimiento reducido (prefers-reduced-motion).

El elemento se encoge un poco mientras se pulsa y vuelve con un rebote al soltarlo.

Añade un efecto "Press (Button Tap Scale)" (también llamado tap feedback o press state) en [dónde].
Mientras se pulsa, el elemento debe encogerse un poco y oscurecerse ligeramente, y al soltarlo volver a su tamaño con un pequeño rebote: rápido y sutil.
Muestra la misma respuesta al pulsar con el teclado y con el dedo, y evita que el diseño de alrededor se mueva.