Toast Slide-In

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

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.

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 aparece enquanto se desloca um pouco a partir de um lado até a posição final.

Adicione uma animação de entrada "Fade In Directional" (também chamada fade in left, fade in right ou fade in down) em [onde].
O elemento deve aparecer enquanto se desloca um pouco a partir de um lado até a posição final: rápido e fluido, desacelerando ao chegar, sem quique.
Reproduza só uma vez e mostre o elemento no lugar sem movimento se o usuário preferir movimento reduzido (prefers-reduced-motion).

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.