Rubber Band

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.

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 tiembla rápido de un lado a otro sobre un solo eje.

Añade un efecto "Shake" (también llamado error shake o invalid input shake) en [dónde].
El elemento debe temblar rápido a izquierda y derecha unas cuantas veces y detenerse justo donde empezó: rápido y firme.
Reprodúcelo una vez cada vez que ocurra el error en lugar de repetirlo en bucle, y acompáñalo de un mensaje de error visible para que el significado no dependa solo del movimiento.

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 gira sin parar a velocidad constante.

Añade un efecto "Spin" (también llamado spinner o rotate loop) en [dónde].
El elemento debe girar sin parar a una velocidad constante y uniforme, sin easing entre vueltas.
Haz que el bucle no tenga cortes, dale al spinner una etiqueta de carga accesible, y ralentízalo o detenlo si el usuario prefiere movimiento reducido (prefers-reduced-motion).

El elemento se balancea de un lado a otro desde su borde superior, como un péndulo cuya amplitud se va reduciendo.

Añade un efecto de atención "Swing" en [dónde].
El elemento debe balancearse de un lado a otro como un cartel colgante, empezando con un vaivén amplio que se apaga rápido.
Haz que pivote desde su borde superior y no desde el centro, y reprodúcelo una vez al activarse.