Carousel Crossfade (carrossel com fade)
Também chamada Fade slideshow, Carousel fade
Os slides ficam no lugar e se dissolvem um no outro em vez de deslizar.
Onde usar
Slideshows de hero, depoimentos
Prompt
Substitua [onde] pela parte da sua página e cole o prompt no seu agente de IA. Cada prompt traz o nome da animação, então da próxima vez basta pedir pelo nome.
Adicione um carrossel com fade ("Carousel Crossfade", também chamado fade slideshow ou carousel fade) em [onde].
Os slides devem ficar no lugar e se dissolver devagar um no outro, o antigo sumindo enquanto o próximo aparece ao mesmo tempo, e ficar parados alguns segundos antes da próxima troca.
Volte ao primeiro slide sem cortes, pause ao passar o mouse ou ao receber foco, e não avance sozinho se o usuário preferir movimento reduzido (prefers-reduced-motion).Animações parecidas
A
B
Clique
Crossfade Page Transition
Também chamada Cross-dissolve, Fade transition, Root cross-fade, Cross-Document View Transition, MPA view transition, @view-transition navigation auto
A página antiga desaparece com fade enquanto a nova aparece com fade na mesma área.
Onde usar
Troca de rota padrão
Adicione uma "Crossfade Page Transition" (também chamada cross-dissolve ou fade transition) em [onde].
Ao navegar, a página antiga deve desaparecer com fade enquanto a nova aparece ao mesmo tempo na mesma área: suave e bem rápida.
Mantenha as duas páginas no mesmo lugar para que nada se desloque durante o fade e mova o foco para o título principal da nova página após a troca.A
B
C
Clique
Carousel Slide (carrossel)
Também chamada Slider, Swipe carousel, Scroll-snap carousel
Os slides passam na horizontal por uma área visível, encaixando um item de cada vez.
Onde usar
Banners de hero, galerias de produtos
Adicione um carrossel ("Carousel Slide", também chamado slider ou swipe carousel) em [onde].
Cada passo deve deslizar a fileira para o lado para que o próximo slide se encaixe no centro, suave e desacelerando, com os vizinhos aparecendo nas bordas e os pontos de posição acompanhando.
Avance um slide por vez, aceite deslizar no toque além de botões e setas do teclado, e coloque rótulos nos controles para leitores de tela.A
B
Clique
Fade Through
Também chamada Fade-through transition, Out-In Route Transition, Wait mode, mode="wait", mode="out-in"
O conteúdo que sai desaparece por completo com fade e depois o que entra aparece com fade e uma leve escala.
Onde usar
Troca entre destinos sem relação entre si
Adicione uma transição de página "Fade Through" (também chamada fade-through transition ou out-in route transition) em [onde].
Primeiro, o conteúdo que sai deve desaparecer com fade, rápido e por completo; depois, o que entra deve aparecer com fade enquanto cresce levemente até o seu lugar.
Nunca deixe os dois se sobreporem e evite que o layout do conteúdo que entra se desloque enquanto ele escala.ABCDE
Arraste
Coverflow
Também chamada Cover flow carousel
O item central fica de frente enquanto os laterais se inclinam em perspectiva.
Onde usar
Carrosséis de álbuns e mídia
Adicione um carrossel "Coverflow" (também chamado cover flow carousel) em [onde].
O item central deve ficar de frente enquanto os de cada lado giram em perspectiva; arrastar para o lado desliza a fileira e, ao soltar, ela se acomoda suavemente no item mais próximo.
Suporte as setas do teclado e o gesto de deslizar além do arraste, e mantenha a rolagem vertical da página funcionando em telas touch.Mais em Component & Layout
BC
A
A
Clique
Container Transform
Também chamada Card expand to detail, Expandable card, Morph card to page
Um card cresce até virar uma tela de detalhes completa, mantendo um único contêiner visível que muda de forma e revela o novo conteúdo.
Onde usar
De card de lista para detalhe, de FAB para painel
Adicione uma transição "Container Transform" (também chamada card expand to detail ou expandable card) em [onde].
Ao abrir o card, o mesmo contêiner deve crescer suavemente até a tela de detalhes completa, com o conteúdo antigo sumindo rápido e o novo aparecendo quando o crescimento estiver quase no fim; ao fechar, toca ao contrário.
Mantenha um único contêiner contínuo em vez de um fade entre duas caixas separadas, e mova o foco para a tela de detalhes quando ela abrir.- A
- B
- C
- D
Arraste
Drag-to-Reorder List
Também chamada Reorder, Sortable list
Ao arrastar um item, os outros deslizam para abrir espaço e se acomodam na nova ordem.
Onde usar
Kanban, configurações ordenáveis, playlists
Adicione uma "Drag-to-Reorder List" (também chamada sortable list) em [onde].
O item arrastado deve seguir o ponteiro diretamente e se erguer um pouco, enquanto os outros itens deslizam suavemente para sair do caminho; ao soltar, ele deve se acomodar rápido no espaço mais próximo.
Aceite toque além de mouse, e ofereça um jeito de mover itens pelo teclado, com a nova posição anunciada para leitores de tela.