Jello

El elemento se estira a lo ancho y se aplasta a lo alto en pasos elásticos antes de volver a la normalidad.

Añade un efecto de atención "Rubber Band" (también llamado rubberband) en [dónde].
El elemento debe estirarse a lo ancho y aplastarse a lo alto, y luego rebotar con unos cuantos pasos elásticos más pequeños hasta quedarse en su tamaño normal.
Reprodúcelo una vez al activarse y evita que el diseño de alrededor se desplace mientras se estira.

El elemento se balancea de lado a lado inclinándose, como un objeto inestable.

Añade un efecto de atención "Wobble" en [dónde].
El elemento debe balancearse de lado a lado con una inclinación, empezando con un vaivén grande que se reduce en cada oscilación hasta quedarse quieto.
Reprodúcelo una vez al activarse y evita que el contenido vecino se desplace.

El elemento se inclina de lado al pasar el cursor.

Añade un efecto hover "Skew" en [dónde].
El elemento debe inclinarse de lado hasta quedar ligeramente sesgado mientras el cursor está encima, y enderezarse cuando sale: rápido y suave.
Mantén el texto legible mientras está inclinado, evita que el diseño de alrededor se desplace y muestra el mismo efecto con el foco del teclado.

El elemento oscila de lado a lado con una ligera rotación, como una cabeza que dice que no.

Añade un efecto de atención "Head Shake" (también llamado headshake o no shake) en [dónde].
El elemento debe girar rápido de lado a lado con una ligera torsión, como una cabeza que dice que no, y cada giro debe ser más pequeño que el anterior hasta quedarse quieto.
Reprodúcelo una vez cada vez que se active, por ejemplo ante una acción rechazada, y evita que el diseño de alrededor se mueva.

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