Modal Scale-Fade In

Um menu flutuante aparece com fade e cresce a partir do ponto onde fica o seu gatilho.

Adicione uma animação "Popover / Dropdown Open" (também chamada menu pop ou dropdown scale-fade) em [onde].
O menu deve aparecer com fade enquanto cresce levemente a partir do canto ao lado do seu gatilho, rápido e preciso, e sumir um pouco mais rápido ao fechar.
Mantenha-o ancorado ao gatilho, feche com Escape ou com um clique fora e exponha o estado aberto no gatilho para leitores de tela.

O elemento cresce de um estado pequeno e transparente até o tamanho total enquanto aparece.

Adicione uma animação de entrada "Zoom In" (também chamada scale in) em [onde].
O elemento deve crescer de pequeno e transparente até o tamanho total enquanto aparece: rápido e suave, sem passar do tamanho final.
Escale-o a partir do centro sem afetar o layout ao redor e mostre-o no lugar sem movimento se o usuário preferir movimento reduzido (prefers-reduced-motion).

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.

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.

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