Stagger

Um título é dividido em caracteres, palavras ou linhas que se animam um após o outro com um pequeno atraso.

Adicione uma entrada "Split Text Stagger" (também chamada letter stagger ou staggered text reveal) em [onde].
Divida o título em letras que sobem e aparecem uma após a outra com um atraso curto entre elas, rápido e suave, sem quique.
Reproduza só uma vez quando o título entrar na tela, faça os leitores de tela lerem como uma única palavra e mostre sem movimento 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.

O elemento sobe um pouco enquanto aparece, como se estivesse se encaixando no lugar.

Adicione uma animação de entrada "Fade Up" (também chamada fade-in-up ou reveal on scroll) em [onde].
Os elementos devem subir levemente enquanto aparecem, na primeira vez que entram na tela ao rolar: sutil e rápido, sem efeito de quique.
Reproduza só uma vez e não anime se o usuário preferir movimento reduzido (prefers-reduced-motion).

Uma animação é reproduzida uma vez quando um elemento entra ou sai da viewport.

Adicione uma "Scroll-Triggered Animation" (também chamada de reveal on scroll ou animate on scroll) em [onde].
Cada item deve aparecer com fade e subir até o lugar uma única vez ao entrar na tela, no próprio ritmo rápido e suave, em vez de acompanhar a posição de rolagem.
Mantenha o conteúdo visível se os scripts não carregarem e mostre os itens na hora se o usuário preferir movimento reduzido (prefers-reduced-motion).

O elemento gira e cresce a partir de um ponto enquanto aparece.

Adicione uma animação de entrada "Swirl In" (também chamada swirl in forward) em [onde].
O elemento deve girar bem mais de uma volta completa enquanto cresce de um único ponto até o tamanho total e aparece: rápido no início, desacelerando ao se assentar.
Reproduza só uma vez em um único elemento, não em um grupo inteiro, e mostre-o no lugar sem movimento se o usuário preferir movimento reduzido (prefers-reduced-motion).

As letras começam bem espaçadas e apagadas e se aproximam até o espaçamento normal enquanto aparecem.

Adicione uma animação de texto "Tracking In" (também chamada text tracking in ou letter-spacing in) em [onde].
As letras devem começar bem espaçadas e apagadas e se aproximar até o espaçamento normal enquanto ficam totalmente visíveis: suave, desacelerando no fim.
Mantenha o texto centralizado e em uma única linha enquanto o espaçamento muda, para o layout ao redor não se mexer, e mostre-o com espaçamento normal se o usuário preferir movimento reduzido (prefers-reduced-motion).

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