Fade Up
También llamado Fade In Up, Reveal on Scroll
El elemento sube una distancia corta mientras aparece, como si se asentara en su lugar.
Se usa en
Títulos de sección, tarjetas e imágenes que aparecen al hacer scroll
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 "Fade Up" (también llamada fade-in-up o reveal on scroll) en [dónde].
Los elementos deben subir ligeramente mientras aparecen la primera vez que entran en pantalla al hacer scroll: sutil y rápido, sin rebote.
Reprodúcela una sola vez y omite el movimiento si el usuario prefiere movimiento reducido (prefers-reduced-motion).Animaciones parecidas
A
Fade In Directional
También llamado Fade In Down, Fade In Left, Fade In Right
El elemento aparece mientras se desplaza una distancia corta desde un lado hasta su posición final.
Se usa en
Secciones y tarjetas que aparecen al cargar o al hacer scroll
Añade una animación de entrada "Fade In Directional" (también llamada fade in left, fade in right o fade in down) en [dónde].
El elemento debe aparecer mientras se desplaza una distancia corta desde un lado hasta su posición final: rápido y fluido, frenando al llegar, sin rebote.
Reprodúcela una sola vez y muestra el elemento en su lugar sin movimiento si el usuario prefiere movimiento reducido (prefers-reduced-motion).A
Slide In
También llamado Slide In Up, Slide In Down, Slide In Left, Slide In Right
El elemento se desliza desde fuera del borde de su contenedor hasta su posición de reposo, sin desvanecerse.
Se usa en
Cajones, paneles laterales, banners
Añade una animación de entrada "Slide In" (también llamada slide in left, slide in right, slide in up o slide in down) en [dónde].
El elemento debe deslizarse desde más allá del borde de su contenedor hasta su sitio, totalmente opaco todo el tiempo: rápido, frenando con suavidad y sin rebote.
Recórtalo en el borde del contenedor para que no se superponga a los elementos vecinos ni genere barras de desplazamiento mientras está fuera, y muéstralo en su sitio si el usuario prefiere movimiento reducido (prefers-reduced-motion).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
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).Más en Entrance & Exit
ABCD
El elemento se enciende con destellos rápidos de opacidad, como un letrero de neón averiado, antes de quedarse visible.
Se usa en
Efectos de texto neón y retro
Añade una animación de entrada "Flicker In" en [dónde].
El elemento debe encenderse y apagarse unas cuantas veces a intervalos irregulares, como un letrero de neón averiado, antes de quedarse encendido: destellos secos, sin desplazamiento.
Reprodúcela una sola vez, con pocos destellos y lo bastante lentos para no afectar a personas sensibles a las luces intermitentes, y muéstralo encendido de forma fija si el usuario prefiere movimiento reducido (prefers-reduced-motion).A
El elemento da una vuelta completa sobre el eje Y mientras se acerca un poco al espectador y vuelve.
Se usa en
Revelar una tarjeta o insignia llamando la atención
Añade una animación "Flip" en [dónde].
El elemento debe dar una vuelta completa sobre su eje vertical mientras se acerca un poco al espectador, y luego volver con una leve reducción de tamaño: vivo pero breve.
Dale perspectiva para que el giro se lea como profundidad, reprodúcela una sola vez en lugar de en bucle, y omite el giro si el usuario prefiere movimiento reducido (prefers-reduced-motion).A
Flip In
También llamado Flip In X, Flip In Y
El elemento gira en 3D sobre su eje horizontal o vertical, de estar de canto a quedar de frente al espectador.
Se usa en
Revelado de tarjetas y mosaicos
Añade una animación de entrada "Flip In" (también llamada flip in X o flip in Y) en [dónde].
El elemento debe empezar de canto y girar sobre su eje horizontal hasta quedar de frente, pasándose un poco y volviendo antes de asentarse: rápido, con un pequeño bamboleo.
Dale perspectiva para que el giro se lea como profundidad, y muéstralo de frente sin movimiento si el usuario prefiere movimiento reducido (prefers-reduced-motion).