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
Variantes
- to right
- to left
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 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).Animaciones parecidas
A
Slide Out
También llamado Slide Out Up, Slide Out Down
El elemento se desliza más allá del borde de un contenedor y desaparece.
Se usa en
Cierre de cajones y paneles
Añade una animación de salida "Slide Out" (también llamada slide out up o slide out down) en [dónde].
El elemento debe deslizarse más allá del borde de su contenedor y desaparecer, sin perder opacidad: rápido, acelerando al irse.
Recórtalo en el borde del contenedor, ocúltalo al teclado y a los lectores de pantalla cuando ya no esté a la vista, y ocúltalo al instante si el usuario prefiere movimiento reducido (prefers-reduced-motion).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
Fade Out Directional
También llamado Fade Out Up, Fade Out Down
El elemento desaparece mientras se desplaza en una dirección.
Se usa en
Descartar notificaciones y tarjetas
Añade una animación de salida "Fade Out Directional" (también llamada fade out up o fade out down) en [dónde].
El elemento debe desaparecer mientras se desplaza una distancia corta en una dirección: rápido, acelerando al salir.
Quítalo del diseño solo cuando termine el desvanecimiento para que el contenido vecino no salte antes de tiempo, y ocúltalo al instante si el usuario prefiere movimiento reducido (prefers-reduced-motion).Más en Entrance & Exit
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).A
El elemento entra rodando desde la izquierda como una rueda mientras aparece.
Se usa en
Entrada lúdica de elementos de lista
Añade una animación de entrada "Roll In" en [dónde].
El elemento debe entrar rodando desde la izquierda como una rueda, girando mientras avanza, a la vez que aparece: suave, frenando al llegar.
Reprodúcela una sola vez y muestra el elemento en su sitio sin movimiento si el usuario prefiere movimiento reducido (prefers-reduced-motion).A
El elemento sale rodando hacia la derecha mientras se desvanece.
Se usa en
Eliminación lúdica de elementos de lista
Añade una animación de salida "Roll Out" en [dónde].
El elemento debe salir rodando hacia la derecha como una rueda, girando mientras avanza, a la vez que se desvanece: suave, acelerando al irse.
Quítalo del diseño solo cuando haya terminado de rodar y ocúltalo al instante si el usuario prefiere movimiento reducido (prefers-reduced-motion).