Jack In The Box
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
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 "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).Animaciones parecidas
A
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
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).A
Swirl In
También llamado Swirl In Forward
El elemento gira y crece desde un punto mientras aparece.
Se usa en
Entrada de elementos decorativos o logotipos
Añade una animación de entrada "Swirl In" (también llamada swirl in forward) en [dónde].
El elemento debe girar bastante más de una vuelta completa mientras crece desde un solo punto hasta su tamaño completo y aparece: rápido al principio, frenando al asentarse.
Reprodúcela una sola vez en un único elemento en lugar de en todo un grupo, y muéstralo en su sitio sin movimiento si el usuario prefiere movimiento reducido (prefers-reduced-motion).A
Rotate In
También llamado Rotate In Down Left
El elemento entra girando alrededor de una esquina o de su centro mientras aparece.
Se usa en
Entrada lúdica de iconos o tarjetas
Añade una animación de entrada "Rotate In" (también llamada rotate in down left) en [dónde].
El elemento debe girar hasta su sitio alrededor de su esquina inferior izquierda, partiendo de un ángulo inclinado, mientras aparece: suave y sin prisa, frenando al asentarse.
Reprodúcela una sola vez y muestra el elemento en su sitio sin movimiento si el usuario prefiere movimiento reducido (prefers-reduced-motion).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).Más en Entrance & Exit
A
Light Speed In
También llamado Lightspeed In
El elemento entra disparado desde un lado con una inclinación que se endereza al llegar.
Se usa en
Entrada impactante de banners o titulares
Añade una animación de entrada "Light Speed In" (también llamada lightspeed in) en [dónde].
El elemento debe entrar muy rápido desde un lado, inclinado como si fuera a toda velocidad, corregir de más la inclinación una vez y enderezarse al llegar: rápido e impactante, frenando al final.
Evita que genere una barra de desplazamiento horizontal mientras sigue fuera de la pantalla, y muéstralo en su sitio sin movimiento si el usuario prefiere movimiento reducido (prefers-reduced-motion).A
Light Speed Out
También llamado Lightspeed Out
El elemento se inclina y sale disparado hacia un lado mientras se desvanece.
Se usa en
Salida impactante
Añade una animación de salida "Light Speed Out" (también llamada lightspeed out) en [dónde].
El elemento debe inclinarse y salir disparado hacia un lado mientras se desvanece: rápido, acelerando al irse.
Evita que genere una barra de desplazamiento horizontal al cruzar el borde, y ocúltalo al instante si el usuario prefiere movimiento reducido (prefers-reduced-motion).A
Puff In / Puff Out
También llamado Puff
El elemento se reduce desde un estado grande, borroso y transparente hasta quedar nítido, como una bocanada de humo, o al revés al salir.
Se usa en
Aparición suave de objetos
Añade una animación "Puff In / Puff Out" (también llamada puff) en [dónde].
Al aparecer, el elemento debe reducirse desde un estado grande, borroso y transparente hasta quedar nítido, como una bocanada de humo que se asienta; al salir, debe volver a hincharse en un desenfoque y desvanecerse: suave y bastante rápido.
Evita que el estado agrandado empuje el diseño o genere barras de desplazamiento, y cambia al instante si el usuario prefiere movimiento reducido (prefers-reduced-motion).