# Animações de texto: subir, saltar, varrer e máquina de escrever

[Canonical HTML page](https://gradiently.design/pt-pt/guide/text-animation-ideas)

Não precisas de cinquenta efeitos. Quatro entradas, bem escolhidas e bem cronometradas, resolvem stories, Reels, anúncios e citações. Eis qual usar e quando.

## The short version

- Subir, saltar, varrer e máquina de escrever são quatro estilos de animação de texto que cobrem a maioria dos posts de redes sociais.
- Subir serve mensagens calmas, premium e editoriais; saltar serve palavras curtas e enérgicas, como preços e ofertas.
- Varrer revela uma linha como uma cortina e funciona para títulos e revelações de antes e depois; máquina de escrever serve citações, perguntas e tudo o que deva parecer escrito no momento.
- A maioria das animações de entrada lê-se melhor entre cerca de um quarto e três quartos de segundo, seguidas de uma pausa que dê para ler a linha duas vezes.
- Usa um só estilo de animação num post ou numa série e escalona as linhas em vez de animares cada palavra de maneira diferente.

Para posts de redes sociais, quatro estilos de **animação de texto** fazem quase tudo: **subir** (as palavras flutuam para cima e surgem em fade, calmo e premium), **saltar** (as palavras crescem com um pequeno ressalto, curto e forte), **varrer** (uma linha é revelada de um lado, como uma cortina) e **máquina de escrever** (as letras surgem uma a uma, como se estivessem a ser escritas agora). Ajusta o estilo à mensagem, mantém cada entrada abaixo de cerca de três quartos de segundo e depois deixa as palavras paradas o suficiente para as leres duas vezes. Usa um estilo por post. Isso é quase todo o ofício.

## As quatro animações de texto de relance

| Animação | Sensação | Usa para | Duração da entrada |
| --- | --- | --- | --- |
| Subir | Calma, confiante, premium | Títulos, lançamentos, citações, posts editoriais | 400 a 700 ms |
| Saltar | Enérgica, divertida, urgente | Preços, ofertas, ganchos de uma palavra, contagens decrescentes | 250 a 400 ms |
| Varrer | Precisa, cinematográfica, reveladora | Títulos, revelações, antes e depois | 500 a 800 ms |
| Máquina de escrever | Pessoal, curiosa, no momento | Perguntas, citações, dicas, bastidores | 30 a 60 ms por letra |

Pontos de partida para cada estilo. Mais lento parece mais caro; mais rápido parece mais urgente. Exagera para qualquer lado e as pessoas deixam de ler.

## Subir: a predefinição segura e premium

Subir move cada linha uma curta distância para cima enquanto surge em fade e depois deixa-a assentar. Como o movimento é pequeno e desacelera, o olhar lê as palavras quase assim que começam a aparecer. É a predefinição certa para marcas que querem parecer calmas: hotéis, estúdios, cuidados da pele, arquitetura, consultoras.

Um post social vertical a anunciar uma coleção de outono, com pré-título, título e linha de detalhe

Um post de lançamento que combina com subir: primeiro o pré-título, depois o título, depois o detalhe, cada um a chegar um instante depois do anterior.

Escalona as linhas cerca de 100 a 150 milissegundos para caírem em cascata. Escalona palavras só em linhas muito curtas; escalonar letras com subir parece trabalhoso.

## Saltar: para palavras curtas que têm de aterrar

Saltar faz crescer uma palavra a partir de um tamanho ligeiramente menor, passa um pouco e assenta. Tem energia, por isso serve palavras que queres que acertem: um preço, uma percentagem, “Esgotado”, “Esta noite”, “Último dia”. Falha em frases longas, que tremem em vez de aterrar.

Um story vertical de saldos com as palavras Último dia em letra grande e Termina à meia-noite por baixo

Duas palavras que saltam: curtas, urgentes, lidas num instante.

## Varrer: revela um título como uma cortina

Varrer descobre uma linha de uma borda à outra, por isso as palavras aparecem pela ordem de leitura sem se moverem. Parece deliberado e cinematográfico e, como as letras ficam paradas, é uma das entradas mais legíveis. Usa-o para títulos, para uma linha de “antes” varrida para revelar um “depois”, ou para um nome revelado no fim de um vídeo.

Varre no sentido da leitura: da esquerda para a direita em português e na maioria das línguas europeias. Um varrimento contra o sentido da leitura parece que o texto está a ser retirado.

## Máquina de escrever: palavras escritas no momento

A máquina de escrever revela as letras uma a uma. É mais lenta do que as outras três, e é esse o objetivo: faz uma linha parecer pessoal, como se alguém te estivesse a escrever agora. Usa-a para perguntas, citações curtas, dicas e notas de bastidores. Mantém a linha curta, porque a frase inteira tem de acabar de ser escrita antes de as pessoas a poderem ler, e depois ainda precisa de uma pausa.

Um story vertical a perguntar O que fazemos de pastel na sexta, com espaço por baixo para uma sondagem

Uma pergunta combina com a máquina de escrever: parece escrita por uma pessoa, em direto, para ti. Curta o suficiente para acabar de ser escrita em cerca de um segundo.

> **Contas da máquina de escrever** A 40 ms por letra, uma linha de 30 letras demora 1,2 segundos a escrever, mais cerca de dois segundos de pausa. Uma linha de quinze palavras passa dos três segundos antes de a pausa sequer começar, por isso corta palavras ou reparte-as por vários enquadramentos.

## Escolher a animação de texto certa

1. **Parte da mensagem** As notícias calmas sobem. As urgentes saltam. Uma revelação varre. Uma nota pessoal escreve-se.
2. **Conta as palavras** De uma a três palavras aceitam qualquer estilo. As linhas longas funcionam melhor com subir ou varrer; evita saltar e máquina de escrever.
3. **Escolhe um estilo por post** Misturar entradas num só enquadramento parece um modelo a exibir-se. A coerência é o que faz o movimento parecer da marca.
4. **Define a pausa** Depois de a última palavra assentar, mantém o enquadramento o suficiente para ler duas vezes. Os stories avançam sozinhos, por isso isto importa mais nos [stories do Instagram](https://gradiently.design/pt-pt/guide/instagram-story-design).
5. **Vê-o em silêncio num telemóvel** É assim que muitos dos teus espectadores o vão ver. Se alguma linha for difícil de apanhar, abranda-a ou corta palavras.

### Evitar

- Cada linha com uma animação diferente
- Letras a rodar, virar ou saltar repetidamente
- Texto ainda em movimento quando o story avança
- Saltar numa frase completa
- Texto animado sobre um vídeo carregado e rápido

### Fazer

- Um estilo para todo o post ou série
- Uma entrada e depois quietude
- Uma pausa clara antes do enquadramento seguinte
- Saltar em uma a três palavras
- Um fundo calmo, de movimento lento, por baixo das palavras

## Animações de texto em CSS para copiar

Num site, os mesmos quatro estilos precisam de poucas linhas de CSS cada um. Mantém-nos curtos, executa-os uma vez e desliga-os para quem prefere movimento reduzido.

```css
/* Transforms skip plain inline text: use these on block or inline-block elements */
.rise { animation: rise 600ms cubic-bezier(0.2, 0.8, 0.2, 1) both; }
@keyframes rise { from { opacity: 0; transform: translateY(0.4em); } }

.pop { animation: pop 320ms cubic-bezier(0.3, 1.5, 0.6, 1) both; }
@keyframes pop { from { opacity: 0; transform: scale(0.85); } }

.wipe { animation: wipe 700ms cubic-bezier(0.6, 0, 0.2, 1) both; }
@keyframes wipe { from { clip-path: inset(0 100% 0 0); } to { clip-path: inset(0 0 0 0); } }

.typewriter {
  font-family: ui-monospace, monospace; /* steps() needs equal letter widths */
  white-space: nowrap; overflow: hidden; width: 24ch;
  animation: type 1.2s steps(24) both;
}
@keyframes type { from { width: 0; } }

@media (prefers-reduced-motion: reduce) {
  .rise, .pop, .wipe, .typewriter { animation: none; }
}
```

Ajusta a largura e os passos da máquina de escrever ao número de caracteres da tua linha. Para linhas em tipos de letra proporcionais, revela letra a letra com um pequeno script.

As curvas importam tanto como as durações; [easing](https://gradiently.design/pt-pt/guide/easing) explica porque subir deve desacelerar e saltar deve passar um pouco. Para o ofício mais amplo do texto em movimento, vê [tipografia cinética](https://gradiently.design/pt-pt/guide/variable-font-animation).

## Animar texto no Gradiently

O Studio do Gradiently tem estas quatro animações de texto, subir, saltar, varrer e máquina de escrever, para qualquer camada de texto, sobre um Mark que se pode mover devagar por trás das palavras. O Mark mantém a sua zona mais calma sob o texto enquanto se move, por isso as linhas continuam legíveis durante toda a animação. Com o Pro, exportas stories e Reels como GIF, ou como MP4 ou WebM quando o navegador suporta gravação. [Stories animados do Instagram](https://gradiently.design/pt-pt/guide/animated-instagram-story) e [GIF vs MP4](https://gradiently.design/pt-pt/guide/gif-vs-mp4) ajudam-te a escolher o formato.

## FAQ

### Qual é a melhor animação de texto para stories do Instagram?

Subir é a predefinição mais segura para a maioria dos stories. Usa saltar para palavras curtas e urgentes, varrer para revelações e máquina de escrever para perguntas ou notas pessoais.

### Quanto tempo deve durar uma animação de texto?

A maioria das entradas lê-se bem entre cerca de 250 e 800 milissegundos, seguidas de uma pausa que dê para ler a linha duas vezes.

### Como faço um efeito de texto de máquina de escrever?

Revela um caractere de cada vez a cerca de 30 a 60 milissegundos por letra. Em CSS, anima a largura de uma linha monoespaçada com steps() igual ao número de caracteres.

### Devo usar animações de texto diferentes num só post?

Normalmente não. Um só estilo num post, ou numa série inteira, parece deliberado e de marca; misturar estilos parece carregado.