Container Transform

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.

Uma miniatura aumenta a partir do seu lugar até uma visualização grande e centralizada sobre um fundo escurecido.

Adicione um "Lightbox Zoom" (também chamado image zoom overlay ou Medium-style zoom) em [onde].
Clicar em uma miniatura deve fazê-la crescer suavemente a partir do próprio lugar até uma visualização grande e centralizada enquanto a página ao fundo escurece, e fechar deve encolhê-la de volta ao mesmo lugar.
Feche com Escape ou com um clique no fundo, leve o foco para a visualização enquanto estiver aberta e devolva o foco à miniatura depois.

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

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