Spin

Un icono dentro de un botón gira sobre sí mismo al pasar el cursor por el botón.

Añade un efecto hover "Icon Spin" en [dónde].
El icono dentro del elemento debe dar una vuelta completa con suavidad cuando entre el puntero, y girar de vuelta cuando salga.
Gira solo el icono, no el botón entero, y muestra el mismo efecto con el foco del teclado.

Un anillo o arco gira sin parar para indicar que algo está cargando.

Añade un "Circular Spinner" (también llamado spinner o throbber) en [dónde].
Un arco debe girar a ritmo constante alrededor de un anillo tenue mientras se alarga y se acorta, suave y continuo.
Haz que el giro sea continuo, dale una etiqueta de carga para lectores de pantalla y ralentízalo o detenlo si el usuario prefiere movimiento reducido (prefers-reduced-motion).

El elemento gira unos pocos grados al pasar el cursor.

Añade un efecto hover "Rotate" en [dónde].
El elemento debe girar ligeramente en el sentido de las agujas del reloj mientras el puntero esté encima y volver al salir: suave y sutil.
Evita que el diseño de alrededor se desplace y muestra el mismo efecto con el foco del teclado.

El texto se dispone alrededor de un círculo que gira sin parar.

Añade "Spinning Text" (también llamado circular text o text on circle) en [dónde].
Las letras deben repartirse de forma uniforme alrededor de un círculo que gira lento y constante, sin salto cuando el bucle vuelve a empezar.
Da el texto a los lectores de pantalla una sola vez como texto normal y detén la rotación 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.

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 tiembla muy rápido con pequeñas sacudidas en varias direcciones, como un móvil que vibra.

Añade un efecto de atención "Vibrate" (también llamado buzz o vibration) en [dónde].
El elemento debe temblar con sacudidas diminutas y rápidas en distintas direcciones durante un instante, como un móvil que vibra, y luego quedarse quieto.
Mantén el movimiento muy pequeño para que el contenido siga siendo legible, y reprodúcelo una vez por alerta en lugar de repetirlo en bucle.