Shared Layout Animation

Um elemento correspondente, como uma miniatura, se transforma em posição e tamanho de uma página para a seguinte.

Adicione uma "Shared Element Transition" (também chamada hero transition ou view-transition-name morph) em [onde].
Ao ir para a página seguinte, o elemento correspondente, como uma miniatura, deve se mover e crescer suavemente até o seu lugar na nova página enquanto o resto do conteúdo faz um crossfade, e encolher de volta ao retornar.
Dê aos elementos correspondentes das duas páginas uma mesma identidade compartilhada para que se emparelhem corretamente e use um crossfade simples quando o navegador não conseguir transformá-los.

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

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

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.

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.