Carousel Crossfade
También llamado Fade slideshow, Carousel fade
Las diapositivas se quedan en su sitio y se funden unas con otras en lugar de deslizarse.
Se usa en
Presentaciones de hero, testimonios
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 un "Carousel Crossfade" (también llamado fade slideshow o carousel fade) en [dónde].
Las diapositivas deben quedarse en su sitio y fundirse lentamente unas con otras, desapareciendo la anterior mientras aparece la siguiente al mismo tiempo, y mantenerse unos segundos antes del siguiente cambio.
Vuelve a la primera diapositiva sin cortes, pausa al pasar el ratón o al recibir el foco, y no avances automáticamente si el usuario prefiere movimiento reducido (prefers-reduced-motion).Animaciones parecidas
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
C
Haz clic
Carousel Slide (carrusel)
También llamado Slider, Swipe carousel, Scroll-snap carousel
Las diapositivas se mueven en horizontal por una ventana visible y encajan de una en una.
Se usa en
Banners de hero, galerías de productos
Añade un carrusel ("Carousel Slide", también llamado slider o swipe carousel) en [dónde].
Cada paso debe deslizar la fila de lado para que la siguiente diapositiva encaje en el centro, suave y frenando, con las vecinas asomando por los bordes y los puntos de posición siguiendo el cambio.
Avanza de una en una, admite deslizar con el dedo además de botones y flechas del teclado, y pon etiquetas a los controles para los lectores de pantalla.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.ABCDE
Arrastra
Coverflow
También llamado Cover flow carousel
El elemento central mira al frente mientras los laterales se inclinan en perspectiva.
Se usa en
Carruseles de álbumes y contenido multimedia
Añade un carrusel "Coverflow" (también llamado cover flow carousel) en [dónde].
El elemento central debe mirar al frente mientras los de cada lado se giran en perspectiva; arrastrar de lado desplaza la fila y, al soltar, se asienta con suavidad en el elemento más cercano.
Admite las flechas del teclado y los gestos de deslizar además del arrastre, y mantén el scroll vertical de la página en pantallas táctiles.Más en Component & Layout
BC
A
A
Haz clic
Container Transform
También llamado Card expand to detail, Expandable card, Morph card to page
Una tarjeta crece hasta convertirse en una vista de detalle completa, manteniendo un único contenedor visible que cambia de forma y revela contenido nuevo.
Se usa en
De tarjeta de lista a detalle, de FAB a panel
Añade una transición "Container Transform" (también llamada card expand to detail o expandable card) en [dónde].
Al abrir la tarjeta, el mismo contenedor debe crecer con suavidad hasta la vista de detalle completa: su contenido anterior se desvanece rápido y el nuevo aparece cuando casi ha terminado de crecer; al cerrar se reproduce a la inversa.
Mantenlo como un único contenedor continuo en lugar de un fundido entre dos cajas separadas, y mueve el foco a la vista de detalle al abrirse.- A
- B
- C
- D
Arrastra
Drag-to-Reorder List (arrastrar para reordenar)
También llamado Reorder, Sortable list
Al arrastrar un elemento, los demás se apartan deslizándose y se colocan en el nuevo orden.
Se usa en
Kanban, ajustes ordenables, listas de reproducción
Añade una lista de arrastrar para reordenar ("Drag-to-Reorder List", también llamada sortable list) en [dónde].
El elemento arrastrado debe seguir el puntero directamente y elevarse un poco, mientras los demás se apartan deslizándose con suavidad; al soltarlo debe asentarse rápido en el hueco más cercano.
Admite táctil además de ratón, y ofrece una forma de mover elementos con el teclado que anuncie la nueva posición a los lectores de pantalla.