Tracking In
Também chamada Text Tracking In, Letter-spacing In
As letras começam bem espaçadas e apagadas e se aproximam até o espaçamento normal enquanto aparecem.
Onde usar
Entrada de títulos
Variações
- expand
- contract
Prompt
Substitua [onde] pela parte da sua página e cole o prompt no seu agente de IA. Cada prompt traz o nome da animação, então da próxima vez basta pedir pelo nome.
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).Animações parecidas
ABCD
Blur In
Também chamada Slide In Blurred, Text Focus In, Focus In, Blur Text Reveal
O elemento começa bem desfocado e vai ganhando nitidez, muitas vezes enquanto desliza ou aparece.
Onde usar
Revelação de títulos e textos hero
Adicione uma animação de entrada "Blur In" (também chamada text focus in, focus in ou blur text reveal) em [onde].
O conteúdo deve começar bem desfocado e transparente e depois ganhar nitidez no lugar: suave e um tanto lento, sem deslocamento.
Reproduza só uma vez e mostre o texto nítido imediatamente se o usuário preferir movimento reduzido (prefers-reduced-motion).ABCDEF
Split Text Stagger
Também chamada Letter Stagger, Staggered Text Reveal, SplitText, Splitting.js text
Um título é dividido em caracteres, palavras ou linhas que se animam um após o outro com um pequeno atraso.
Onde usar
Manchetes e títulos de seção
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).ABCDEF
Passe o mouse por cima
Letter Scatter
Também chamada Explosive Letter Burst, Scatter Gather Letters
As letras se espalham no hover e voltam, ou explodem para fora na entrada.
Onde usar
Links divertidos
Adicione um efeito de hover "Letter Scatter" (também chamado de scatter gather letters ou explosive letter burst) em [onde].
Quando o ponteiro passar sobre o texto, cada letra deve voar um pouco na própria direção com um leve giro e depois se reagrupar suavemente na palavra quando o ponteiro sair.
Mantenha fixo o espaço da palavra no layout enquanto as letras se movem, faça os leitores de tela lerem como uma só palavra e mostre o mesmo efeito no foco do teclado.ABCDEF
Passe o mouse por cima
Variable Font Weight Animation
Também chamada Font Weight Shift, Breathe Variable Font Animation, Font Transition on Hover
As letras ficam suavemente mais grossas ou mais finas (ou mudam de largura ou inclinação) usando os eixos de uma fonte variável.
Onde usar
Títulos interativos
Adicione um efeito de hover "Variable Font Weight Animation" (também chamado de font weight shift) em [onde].
Enquanto o ponteiro estiver sobre o texto, as letras devem engrossar uma após a outra em uma onda suave da esquerda para a direita e afinar de novo quando o ponteiro sair.
Use uma fonte variável para o peso mudar suavemente em vez de saltar, evite que o título empurre o conteúdo próximo ao alargar e mostre o mesmo efeito no foco do teclado.Mais em Entrance & Exit
A
Zoom In
Também chamada Scale In, Zoom In Up, Zoom In Down
O elemento cresce de um estado pequeno e transparente até o tamanho total enquanto aparece.
Onde usar
Modais, lightboxes de imagem, popovers
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).A
Zoom Out
Também chamada Scale Out
O elemento encolhe e esmaece até sumir.
Onde usar
Fechamento de modais e descarte de itens
Adicione uma animação de saída "Zoom Out" (também chamada scale out) em [onde].
O elemento deve encolher em direção ao centro enquanto esmaece até sumir: rápido, acelerando ao sair.
Tire-o do layout e do foco do teclado só depois que ele sumir e esconda-o na hora se o usuário preferir movimento reduzido (prefers-reduced-motion).A
Back In
Também chamada Back In Up, Back In Down
O elemento começa reduzido e deslocado, depois desliza para dentro e cresce até o tamanho total.
Onde usar
Elementos hero e cards
Adicione uma animação de entrada "Back In" (também chamada back in up ou back in down) em [onde].
O elemento deve chegar de fora de uma borda, reduzido e levemente transparente, e crescer até o tamanho total ao alcançar seu lugar: um movimento deliberado em duas etapas, não um surgimento rápido.
Reproduza só uma vez e mostre o elemento no lugar sem movimento se o usuário preferir movimento reduzido (prefers-reduced-motion).