Swing
El elemento se balancea de un lado a otro desde su borde superior, como un péndulo cuya amplitud se va reduciendo.
Se usa en
Carteles colgantes, iconos de notificación
Prompt
Sustituye [dónde] por la parte de tu página y pega el prompt en tu agente de IA. Cada prompt incluye el nombre de la animación, así la próxima vez puedes pedirla solo por su nombre.
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.Animaciones parecidas
A
El elemento se balancea de lado a lado inclinándose, como un objeto inestable.
Se usa en
Llamar la atención sobre iconos o botones
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.A
Head Shake
También llamado Headshake, No Shake
El elemento oscila de lado a lado con una ligera rotación, como una cabeza que dice que no.
Se usa en
Entradas no válidas o rechazos
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.A
El elemento gira sobre una bisagra en la esquina superior izquierda, se balancea y luego cae fuera de la pantalla.
Se usa en
Quitar un elemento con un toque cómico
Añade una animación de salida "Hinge" en [dónde].
El elemento debe descolgarse desde su esquina superior izquierda como si se hubiera soltado un tornillo, balancearse de un lado a otro y luego caer fuera de la pantalla mientras desaparece: lento, cómico y deliberado.
Deja que caiga por encima del resto del contenido sin empujar el diseño ni añadir barras de desplazamiento, quítalo cuando haya caído, y ocúltalo al instante si el usuario prefiere movimiento reducido (prefers-reduced-motion).A
Pasa el ratón por encima
El elemento gira unos pocos grados al pasar el cursor.
Se usa en
Iconos, miniaturas
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.Más en Emphasis
A
El elemento se agranda, se sacude girando un poco y vuelve a su tamaño, como una pequeña celebración.
Se usa en
Estados de éxito, celebraciones
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).Vibrate
También llamado Vibration, Buzz
El elemento tiembla muy rápido con pequeñas sacudidas en varias direcciones, como un móvil que vibra.
Se usa en
Alertas, avisos tipo llamada entrante
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.