List Item Enter/Exit

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

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.

Os itens de um grupo se animam um após o outro com um pequeno atraso, formando uma onda em vez de aparecerem todos de uma vez.

Adicione uma animação "Stagger" (também chamada staggered animation ou cascata) em [onde].
Os itens devem aparecer subindo um após o outro com um atraso curto e uniforme, para que o grupo pareça uma onda rápida e não tudo de uma vez.
Mantenha a sequência curta mesmo em listas longas, reproduza só uma vez ao entrar na tela e não anime se o usuário preferir movimento reduzido (prefers-reduced-motion).

Deslizar uma linha da lista para o lado revela botões de ação como excluir ou arquivar.

Adicione uma interação "Swipe to Delete" (também chamada swipe actions ou swipe to reveal) em [onde].
Ao arrastar uma linha para o lado, ela deve acompanhar o dedo diretamente para revelar por trás botões de ação como arquivar e excluir, parando quando estiverem totalmente visíveis, e ao soltar deslizar suavemente para o lugar, sem quique.
Mantenha a rolagem vertical funcionando durante o deslize horizontal, e deixe as mesmas ações acessíveis por teclado e leitor de tela sem precisar deslizar.

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

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