Zoom Page Transition
También llamado Scale transition, Zoom in / out
La página anterior se amplía o se reduce y se desvanece mientras la nueva escala hasta su lugar.
Se usa en
Entrar o salir de una jerarquía
Variantes
- zoom in
- zoom 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 "Zoom Page Transition" (también llamada scale transition o zoom in / out) en [dónde].
Al entrar en detalle, la página anterior debe ampliarse un poco y desvanecerse mientras la nueva crece desde un tamaño algo menor hasta su lugar; al volver, el zoom debe ir en sentido contrario: suave y rápido.
Mantén la escala sutil para que el contenido siga legible en todo momento y usa un simple fundido si el usuario prefiere movimiento reducido (prefers-reduced-motion).Animaciones parecidas
A
B
Haz clic
Shared Axis
También llamado Shared axis X/Y/Z
El contenido saliente y el entrante se mueven juntos a lo largo del eje X, Y o Z con fundidos para mostrar su relación espacial.
Se usa en
Pasos de asistentes, navegación entre hermanos, navegación en profundidad
Añade una transición de página "Shared Axis" (también llamada shared axis X/Y/Z) en [dónde].
Al avanzar, el contenido anterior debe deslizarse un poco hacia un lado y desvanecerse rápido mientras el nuevo entra desde el otro lado y aparece justo después; al retroceder, la dirección se invierte.
Mantén el recorrido corto para que solo sugiera la dirección y ajusta el eje a la navegación: lateral para hermanos, vertical para pasos, profundidad para entrar en detalle.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
Modal Scale-Fade In
También llamado Dialog open animation, Zoom-fade dialog
Un diálogo aparece mientras crece ligeramente desde su centro sobre una página oscurecida.
Se usa en
Diálogos de confirmación, formularios en superposición
Añade una animación "Modal Scale-Fade In" (también llamada dialog open animation o zoom-fade dialog) en [dónde].
El diálogo debe aparecer mientras crece ligeramente desde su centro y la página de detrás se oscurece: rápido y sutil, sin rebote.
Reprodúcela una vez cada vez que se abra el diálogo, mueve el foco a él y mantenlo dentro, y usa un simple fundido si el usuario prefiere movimiento reducido (prefers-reduced-motion).A
Zoom In
También llamado Scale In, Zoom In Up, Zoom In Down
El elemento crece desde un estado pequeño y transparente hasta su tamaño completo mientras aparece.
Se usa en
Modales, lightboxes de imágenes, popovers
Añade una animación de entrada "Zoom In" (también llamada scale in) en [dónde].
El elemento debe crecer de pequeño y transparente a su tamaño completo mientras aparece: rápido y suave, sin pasarse de tamaño.
Escálalo desde su centro sin afectar al diseño que lo rodea, y muéstralo en su sitio sin movimiento si el usuario prefiere movimiento reducido (prefers-reduced-motion).Más en Page Transition
A
B
Haz clic
Circular Reveal
También llamado Clip-path circle expand, Theme toggle reveal
La nueva vista se revela dentro de un círculo que se expande desde el punto del clic.
Se usa en
Cambio de tema claro/oscuro, cambio de página
Añade una transición "Circular Reveal" (también llamada clip-path circle expand o theme toggle reveal) en [dónde].
La nueva vista debe aparecer dentro de un círculo que crece desde el control pulsado hasta cubrir toda el área: suave y constante, acelerando y frenando con suavidad.
Haz que el círculo empiece justo donde se pulsó el control y cambia al instante, sin círculo, si el usuario prefiere movimiento reducido (prefers-reduced-motion).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.A
B
Haz clic
Curtain / Panel Wipe
También llamado Page wipe, Curtain reveal, Stripe transition, Staggered panels
Unos paneles sólidos barren la pantalla para cubrir la página anterior y luego se retiran para revelar la nueva.
Se usa en
Navegación en sitios de portafolio y agencias
Añade una transición de página "Curtain / Panel Wipe" (también llamada page wipe o staggered panels) en [dónde].
Unos paneles sólidos deben barrer la pantalla uno tras otro para cubrir la página anterior, la página debe cambiar mientras está totalmente cubierta y los paneles deben seguir hasta salir de la vista para revelar la nueva: contundente y fluida.
No muestres nunca la nueva página antes de que los paneles cubran la anterior y usa un simple fundido si el usuario prefiere movimiento reducido (prefers-reduced-motion).