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
Variantes
- in
- out
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 "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).Animaciones parecidas
ABCD
Blur In
También llamado Slide In Blurred, Text Focus In, Focus In, Blur Text Reveal
El elemento empieza muy desenfocado y se va enfocando, a menudo mientras se desliza o aparece.
Se usa en
Titulares y textos hero que se revelan
Añade una animación de entrada "Blur In" (también llamada text focus in, focus in o blur text reveal) en [dónde].
El contenido debe empezar muy desenfocado y transparente, y luego enfocarse en su sitio: suave y más bien lento, sin desplazamiento.
Reprodúcela una sola vez y muestra el texto nítido de inmediato si el usuario prefiere movimiento reducido (prefers-reduced-motion).A
B
Haz clic
Fade Through
También llamado Fade-through transition, Out-In Route Transition, Wait mode, mode="wait", mode="out-in"
El contenido saliente se desvanece por completo y luego el entrante aparece con un fundido y una ligera escala.
Se usa en
Cambiar entre destinos sin relación entre sí
Añade una transición de página "Fade Through" (también llamada fade-through transition u out-in route transition) en [dónde].
Primero, el contenido saliente debe desvanecerse rápido y por completo; después, el entrante debe aparecer con un fundido mientras crece ligeramente hasta su lugar.
No dejes nunca que ambos se superpongan y evita que el diseño del contenido entrante se desplace mientras escala.A
B
Haz clic
Crossfade Page Transition
También llamado Cross-dissolve, Fade transition, Root cross-fade, Cross-Document View Transition, MPA view transition, @view-transition navigation auto
La página anterior se desvanece mientras la nueva aparece con un fundido en la misma área.
Se usa en
Cambio de ruta por defecto
Añade una "Crossfade Page Transition" (también llamada cross-dissolve o fade transition) en [dónde].
Al navegar, la página anterior debe desvanecerse mientras la nueva aparece a la vez en la misma área: suave y bastante rápida.
Mantén ambas páginas en el mismo lugar para que nada se desplace durante el fundido y mueve el foco al título principal de la nueva página tras el cambio.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
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).Más en Entrance & Exit
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
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).