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
Variantes
- up
- down
- 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 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).Animaciones parecidas
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).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
El elemento se encoge y se desliza hacia un borde mientras desaparece.
Se usa en
Descartar tarjetas
Añade una animación de salida "Back Out" en [dónde].
El elemento debe encogerse un poco en su sitio y luego deslizarse hacia un borde mientras desaparece: una salida deliberada en dos pasos, no un simple desvanecimiento rápido.
Quita el elemento solo cuando termine la animación para que el diseño no salte a mitad del movimiento, y quítalo al instante si el usuario prefiere movimiento reducido (prefers-reduced-motion).Desplázate dentro
Hide on Scroll Header
También llamado Headroom, Auto-hide Navbar, Reveal on Scroll Up, Scroll Direction Detection, Scroll Direction Animation
Un encabezado se oculta al hacer scroll hacia abajo y vuelve a aparecer al hacer scroll hacia arriba.
Se usa en
Barras de navegación en móvil y páginas largas
Añade un "Hide on Scroll Header" (también llamado headroom o auto-hide navbar) en [dónde].
El encabezado debe deslizarse hacia arriba y ocultarse cuando el lector hace scroll hacia abajo, y volver a entrar con cualquier scroll hacia arriba: rápido y suave, reaccionando a la dirección y no a la distancia.
Muéstralo siempre en la parte superior de la página, ignora los pequeños temblores del scroll, y mantenlo visible mientras algo dentro de él tenga el foco del teclado.Más en Entrance & Exit
Stagger
También llamado Staggered Animation, Cascade
Los elementos de un grupo se animan uno tras otro con un pequeño retraso, formando una ola en lugar de aparecer todos a la vez.
Se usa en
Listas, cuadrículas, menús de navegación y resultados de búsqueda
Añade una animación "Stagger" (también llamada staggered animation o cascada) en [dónde].
Los elementos deben aparecer subiendo uno tras otro con un retraso corto y uniforme, para que el grupo se vea como una ola rápida y no todos a la vez.
Mantén la secuencia breve aunque la lista sea larga, reprodúcela una sola vez al entrar en pantalla y omite el 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).ABCD
Tracking In
También llamado Text Tracking In, Letter-spacing In
Las letras empiezan muy separadas y tenues, y se juntan hasta el espaciado normal mientras aparecen.
Se usa en
Entrada de titulares
Añade una animación de texto "Tracking In" (también llamada text tracking in o letter-spacing in) en [dónde].
Las letras deben empezar muy separadas y tenues, y juntarse hasta el espaciado normal mientras se vuelven totalmente visibles: suave, frenando al final.
Mantén el texto centrado y en una sola línea mientras cambia el espaciado para que el diseño de alrededor no se mueva, y muéstralo con el espaciado normal si el usuario prefiere movimiento reducido (prefers-reduced-motion).