Drawer Slide (menu lateral)

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.

O elemento desliza de fora da borda do contêiner até a posição de repouso, sem esmaecer.

Adicione uma animação de entrada "Slide In" (também chamada slide in left, slide in right, slide in up ou slide in down) em [onde].
O elemento deve deslizar de fora da borda do contêiner até o lugar, totalmente opaco o tempo todo: rápido, desacelerando suavemente e sem quique.
Corte-o na borda do contêiner para que não sobreponha os vizinhos nem gere barras de rolagem enquanto está fora e mostre-o no lugar se o usuário preferir movimento reduzido (prefers-reduced-motion).

A nova página entra deslizando por um lado enquanto a antiga sai, e a direção segue a profundidade da navegação.

Adicione uma "Slide Page Transition" (também chamada push / pop ou directional slide) em [onde].
Ao avançar, a nova página deve entrar empurrando pela lateral enquanto a antiga sai pelo outro lado; ao voltar, as duas devem se mover na direção oposta: suave, acelerando e desacelerando com suavidade.
Amarre a direção à profundidade da navegação, incluindo o botão Voltar do navegador, e evite que a página role para o lado durante o deslizamento.

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.

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