Component & Layout

Um painel de conteúdo cresce suavemente até a altura total ou encolhe até zero quando o cabeçalho é alternado.

Adicione uma sanfona (Accordion Expand-Collapse, também chamada collapse ou disclosure) em [onde].
Ao tocar em um cabeçalho, o painel dele deve crescer suavemente até a altura total do conteúdo e fechar por completo no toque seguinte, com a seta do cabeçalho girando junto: rápido e suave, sem quique.
Anime até a altura real do conteúdo em vez de um valor fixo chutado, faça do cabeçalho um botão de verdade que informe se está expandido, e garanta que funcione pelo teclado.

Uma camada escura translúcida aparece atrás de uma sobreposição para escurecer a página.

Adicione um "Backdrop Scrim Fade" (também chamado overlay fade ou scrim) em [onde].
Quando a sobreposição abrir, uma camada escura translúcida deve aparecer suavemente sobre a página de trás, um pouco mais devagar que a própria sobreposição, e sumir de novo ao fechar.
Mantenha o scrim escuro tanto no tema claro quanto no escuro, e impeça que a página de trás role ou receba cliques enquanto ele estiver visível.

Um painel sobe a partir da borda inferior, muitas vezes arrastável e com alturas de encaixe.

Adicione um "Bottom Sheet Slide-Up" (também chamado bottom drawer ou sheet) em [onde].
O painel deve subir a partir da borda inferior enquanto a página de trás escurece, desacelerando suavemente até o lugar, sem quique.
Reproduza uma vez sempre que o painel abrir, faça-o descer de novo ao fechar, e mantenha o foco do teclado dentro do painel enquanto estiver aberto.

Os slides ficam no lugar e se dissolvem um no outro em vez de deslizar.

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).

Os slides passam na horizontal por uma área visível, encaixando um item de cada vez.

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.

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.

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.

Ao arrastar um item, os outros deslizam para abrir espaço e se acomodam na nova ordem.

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.

Um painel lateral desliza a partir da borda esquerda, direita ou superior, empurrando ou cobrindo o conteúdo.

Adicione um menu lateral ("Drawer Slide", também chamado off-canvas ou side sheet) em [onde].
O painel deve deslizar a partir da borda lateral sobre o conteúdo enquanto a página de trás escurece, rápido e desacelerando suavemente, e sair do mesmo jeito ao fechar.
Mantenha o foco do teclado dentro do menu aberto, feche com Escape ou com um clique na área escurecida, e devolva o foco ao botão que o abriu.

Depois que o layout muda, os elementos deslizam suavemente para as novas posições e tamanhos.

Adicione uma "FLIP Layout Animation" (também chamada layout animation ou First-Last-Invert-Play) em [onde].
Quando o layout mudar, cada elemento deve deslizar da posição antiga para a nova em vez de pular, rápido no início e se acomodando suavemente.
Anime só com transforms para que a página não recalcule o layout a cada quadro, e vá direto para o novo layout se o usuário preferir movimento reduzido (prefers-reduced-motion).

Os itens aparecem deslizando quando adicionados e saem animados quando removidos, enquanto os vizinhos fecham o espaço.

Adicione uma animação "List Item Enter/Exit" (também chamada animated list) em [onde].
Um item novo deve primeiro abrir o seu espaço e depois aparecer deslizando; um item removido deve primeiro sumir e depois se recolher, para que os vizinhos fechem o espaço com suavidade.
Mantenha o item removido no lugar até a saída terminar, para que a lista nunca pule quando itens forem adicionados ou removidos.

Uma linha de conteúdo desliza para o lado em um loop infinito e contínuo.

Adicione um letreiro (Marquee) em [onde]: uma faixa que rola na horizontal sem parar, também chamada de ticker.
O conteúdo deve deslizar da direita para a esquerda em velocidade lenta e constante, em um loop contínuo sem saltos visíveis.
Pause ao passar o mouse e pare o movimento se o usuário preferir movimento reduzido (prefers-reduced-motion).

Ao aplicar um filtro ou ordenação, os blocos da grade se reorganizam, somem ou deslizam para novas posições.

Adicione um efeito "Masonry / Grid Shuffle" (também chamado filterable grid animation) em [onde].
Ao aplicar um filtro, os blocos que não combinam mais devem encolher e sumir no lugar, enquanto os restantes deslizam suavemente para as novas posições; ao limpar o filtro, toca ao contrário.
Não deixe a página ao redor pular enquanto a altura da grade muda, e faça dos controles de filtro botões de verdade que informem qual filtro está selecionado.

Um diálogo aparece enquanto cresce levemente a partir do centro, sobre uma página escurecida.

Adicione uma animação "Modal Scale-Fade In" (também chamada dialog open animation ou zoom-fade dialog) em [onde].
O diálogo deve aparecer enquanto cresce levemente a partir do centro e a página de trás escurece: rápido e sutil, sem quique.
Reproduza uma vez sempre que o diálogo abrir, mova o foco para ele e mantenha-o lá dentro, e use só um fade simples se o usuário preferir movimento reduzido (prefers-reduced-motion).

Um menu flutuante aparece com fade e cresce a partir do ponto onde fica o seu gatilho.

Adicione uma animação "Popover / Dropdown Open" (também chamada menu pop ou dropdown scale-fade) em [onde].
O menu deve aparecer com fade enquanto cresce levemente a partir do canto ao lado do seu gatilho, rápido e preciso, e sumir um pouco mais rápido ao fechar.
Mantenha-o ancorado ao gatilho, feche com Escape ou com um clique fora e exponha o estado aberto no gatilho para leitores de tela.

Um elemento parece se mover e mudar de tamanho até um elemento correspondente em outro lugar, como se fossem um só.

Adicione uma "Shared Layout Animation" (também chamada shared element dentro da página) em [onde].
Quando a seleção mudar, o elemento deve parecer se mover e mudar de tamanho suavemente da posição antiga para a nova, assentando com delicadeza, para ser percebido como um único objeto e não dois.
Mostre só uma cópia por vez e evite que o layout ao redor salte durante o movimento.

Um sublinhado ou pílula desliza da aba anterior para a aba recém-selecionada.

Adicione um "Tab Indicator Slide" (também chamado sliding underline ou active tab indicator) em [onde].
Quando uma nova aba for selecionada, o sublinhado deve deslizar da aba anterior para a nova, rápido e desacelerando suavemente, esticando até a largura da nova aba se ela for diferente.
Mantenha a semântica correta de abas com navegação pelas setas do teclado e mova o indicador sem deslizar se o usuário preferir movimento reduzido (prefers-reduced-motion).

Uma mensagem breve desliza ou aparece com fade na borda da tela, espera e depois sai; os toasts empilhados se deslocam para abrir espaço.

Adicione um "Toast Slide-In" (também chamado snackbar ou toast notification) em [onde].
Cada mensagem deve subir a partir da borda da tela e aparecer com fade, desacelerando suavemente; quando um novo toast chegar, os que já estão na tela devem se deslocar suavemente para abrir espaço.
Anuncie a mensagem para leitores de tela sem roubar o foco, deixe-a visível tempo suficiente para ser lida e pause o fechamento automático ao passar o mouse ou ao focar.

Um pequeno rótulo aparece com fade e se acomoda ao lado de um elemento após um breve atraso ao passar o mouse.

Adicione um "Tooltip Fade" (também chamado tooltip reveal) em [onde].
Após um breve atraso ao passar o mouse, o rótulo deve aparecer com fade se acomodando levemente ao lado do elemento, e sumir rápido e sem atraso quando o ponteiro sair.
Mostre-o também no foco do teclado, deixe o Escape fechá-lo e vincule-o ao elemento para que leitores de tela o leiam.