Bounce In
También llamado Bounce In Down, Bounce In Up
El elemento entra con un rebote que se pasa y se asienta, ya sea creciendo o cayendo desde un borde.
Se usa en
Insignias de notificación y modales divertidos
Variantes
- center
- down
- up
- left
- right
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 una animación de entrada "Bounce In" (también llamada bounce in down o bounce in up) en [dónde].
El elemento debe crecer desde pequeño, pasarse de su tamaño completo y tambalearse unas cuantas veces antes de asentarse: rápido y elástico.
Reprodúcela una sola vez para que no siga llamando la atención, y muestra el elemento en su lugar sin movimiento si el usuario prefiere movimiento reducido (prefers-reduced-motion).Animaciones parecidas
A
Back In
También llamado Back In Up, Back In Down
El elemento empieza reducido y desplazado, y luego entra deslizándose mientras crece hasta su tamaño completo.
Se usa en
Elementos hero y tarjetas
Añade una animación de entrada "Back In" (también llamada back in up o back in down) en [dónde].
El elemento debe llegar desde fuera de un borde, reducido y algo transparente, y crecer hasta su tamaño completo al alcanzar su sitio: un movimiento deliberado en dos pasos, no una aparición rápida.
Reprodúcela una sola vez y muestra el elemento en su lugar sin movimiento si el usuario prefiere movimiento reducido (prefers-reduced-motion).A
El elemento surge desde un estado pequeño y girado, se pasa y se asienta como un muñeco sorpresa de resorte.
Se usa en
Revelaciones sorpresa
Añade una animación de entrada "Jack In The Box" en [dónde].
El elemento debe surgir desde un estado diminuto e inclinado, anclado en su borde inferior, balancearse de lado a lado pasando de la vertical y asentarse: elástico y divertido.
Reprodúcela una sola vez y muestra el elemento en su lugar sin movimiento si el usuario prefiere movimiento reducido (prefers-reduced-motion).A
Zoom In
También llamado Scale In, Zoom In Up, Zoom In Down
El elemento crece desde un estado pequeño y transparente hasta su tamaño completo mientras aparece.
Se usa en
Modales, lightboxes de imágenes, popovers
Añade una animación de entrada "Zoom In" (también llamada scale in) en [dónde].
El elemento debe crecer de pequeño y transparente a su tamaño completo mientras aparece: rápido y suave, sin pasarse de tamaño.
Escálalo desde su centro sin afectar al diseño que lo rodea, y muéstralo en su sitio sin movimiento si el usuario prefiere movimiento reducido (prefers-reduced-motion).A
Pasa el ratón por encima
Bounce Scale
También llamado Bounce In / Out
El elemento cambia de escala con un rebote elástico que se pasa un poco al empezar o terminar el hover.
Se usa en
Botones, insignias
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.Más en Entrance & Exit
A
El elemento rebota ligeramente y luego se encoge o sale volando por un borde.
Se usa en
Cierres con un toque divertido
Añade una animación de salida "Bounce Out" en [dónde].
El elemento debe hundirse un poco, crecer algo más allá de su tamaño y luego encogerse mientras desaparece: corto y elástico.
Quítalo del diseño solo cuando termine la animación, y ocúltalo al instante si el usuario prefiere movimiento reducido (prefers-reduced-motion).A
Clip Reveal
También llamado Image Reveal, Mask Reveal, Clip-path Reveal, Wipe Reveal
Un clip-path o una máscara crece desde un borde o un punto y va descubriendo la imagen o el texto.
Se usa en
Revelado de imágenes y titulares
Añade un efecto de entrada "Clip Reveal" (también llamado mask reveal, wipe reveal o image reveal) en [dónde].
Un borde de recorte debe barrer de izquierda a derecha para ir descubriendo el contenido mientras este permanece quieto: fluido, con inicio y final suaves.
Reserva el espacio del elemento desde el principio para que nada se mueva, y muéstralo descubierto por completo si el usuario prefiere movimiento reducido (prefers-reduced-motion).A
Fade In / Fade Out
También llamado Fade
El elemento pasa de totalmente transparente a totalmente opaco en su sitio, o al revés al salir.
Se usa en
Modales, toasts y contenido de página que aparece
Añade una animación "Fade In / Fade Out" (también llamada fade) en [dónde].
El elemento debe pasar de totalmente transparente a totalmente visible en su sitio al aparecer, y desvanecerse igual al salir: suave, sin desplazamiento ni cambio de escala.
Cuando haya desaparecido, asegúrate de que ya no se pueda hacer clic en él ni llegar con el teclado, y cambia al instante si el usuario prefiere movimiento reducido (prefers-reduced-motion).