# Animação de texto para redes sociais: 4 estilos essenciais

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

Você não precisa de cinquenta efeitos. Quatro entradas, bem escolhidas e bem cronometradas, dão conta de stories, Reels, anúncios e citações. Veja qual usar em cada caso.

## The short version

- Subir, pop, cortina e máquina de escrever são quatro estilos de animação de texto que cobrem a maioria dos posts de redes sociais.
- Subir combina com mensagens calmas, premium e editoriais; pop combina com palavras curtas e enérgicas, como preços e ofertas.
- A cortina revela uma linha como um pano que se abre e funciona para títulos e revelações de antes e depois; a máquina de escrever serve para citações, perguntas e tudo que deve parecer escrito na hora.
- A maioria das animações de entrada fica melhor entre cerca de um quarto e três quartos de segundo, seguida de uma pausa longa o bastante para ler a linha duas vezes.
- Use um único estilo de animação num post ou numa série, e escalone as linhas em vez de animar cada palavra de um jeito.

Em posts sociais, quatro estilos de **animação de texto** fazem quase tudo: **subir** (as palavras flutuam para cima e surgem com fade, calmo e premium), **pop** (as palavras crescem com um pequeno salto, curto e forte), **cortina** (uma linha é revelada de um lado, como um pano) e **máquina de escrever** (as letras aparecem uma a uma, como se estivessem sendo escritas agora). Combine o estilo com a mensagem, mantenha cada entrada abaixo de uns três quartos de segundo e depois deixe as palavras paradas o tempo de ler duas vezes. Um estilo por post. Isso é quase todo o ofício.

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

| Animação | Sensação | Use para | Duração da entrada |
| --- | --- | --- | --- |
| Subir | Calma, confiante, premium | Títulos, lançamentos, citações, posts editoriais | 400 a 700 ms |
| Pop | Enérgica, divertida, urgente | Preços, ofertas, ganchos de uma palavra, contagens regressivas | 250 a 400 ms |
| Cortina | 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. Se exagerar para qualquer lado, as pessoas param de ler.

## Subir: o padrão seguro e premium

O estilo subir move cada linha uma curta distância para cima enquanto ela surge com fade, e depois a deixa assentar. Como o movimento é pequeno e desacelera, o olho lê as palavras quase assim que elas começam a aparecer. É o padrão certo para marcas que querem passar calma: hotéis, estúdios, skincare, arquitetura, consultorias.

Um post social vertical anunciando uma coleção de outono, com linha de apoio, título e linha de detalhe

Um post de lançamento que combina com subir: primeiro a linha de apoio, depois o título, depois o detalhe, cada um chegando um instante após o anterior.

Escalone as linhas em cerca de 100 a 150 milissegundos para que caiam em cascata. Escalone palavras só em linhas muito curtas; escalonar letras no estilo subir fica cheio de frescura.

## Pop: para palavras curtas que precisam acertar em cheio

O pop cresce uma palavra a partir de um tamanho um pouco menor, passa um pouco do ponto e assenta. Tem energia, então combina com palavras que você quer que acertem: um preço, uma porcentagem, "Esgotado", "Hoje à noite", "Último dia". Falha em frases longas, que balançam em vez de acertar.

Um story vertical de liquidação com as palavras Último dia em tipo grande e Termina à meia-noite embaixo

Duas palavras em pop: curtas, urgentes, lidas num instante.

## Cortina: revele um título como um pano que se abre

A cortina descobre uma linha de uma borda à outra, então as palavras aparecem na ordem de leitura sem se mover. Parece deliberada e cinematográfica e, como as letras ficam paradas, é uma das entradas mais legíveis. Use para títulos, para uma linha de "antes" apagada para revelar um "depois", ou para um nome revelado no fim de um vídeo.

Passe a cortina no sentido da leitura: da esquerda para a direita em português e na maioria das línguas europeias. Uma cortina contra o sentido da leitura parece que o texto está sendo tirado de você.

## Máquina de escrever: palavras escritas na hora

A máquina de escrever revela as letras uma de cada vez. É mais lenta que as outras três, e esse é o ponto: faz uma linha parecer pessoal, como se alguém escrevesse para você agora. Use em perguntas, citações curtas, dicas e notas de bastidores. Mantenha a linha curta, porque a frase inteira precisa terminar de ser digitada antes de as pessoas poderem lê-la, e ainda precisa de uma pausa.

Um story vertical perguntando O que vamos assar na sexta, com espaço embaixo para uma enquete

Uma pergunta combina com máquina de escrever: parece digitada por uma pessoa, ao vivo, para você. Curta o bastante para terminar de digitar em cerca de um segundo.

> **A conta da máquina de escrever** A 40 ms por letra, uma linha de 30 letras leva 1,2 segundo para ser digitada, mais cerca de dois segundos de pausa. Uma linha de quinze palavras passa de três segundos antes mesmo de a pausa começar, então corte palavras ou divida em quadros.

## Como escolher a animação de texto certa

1. **Comece pela mensagem** Notícia calma sobe. Notícia urgente faz pop. Uma revelação usa cortina. Um recado pessoal é digitado.
2. **Conte as palavras** De uma a três palavras aceitam qualquer estilo. Linhas longas ficam melhores com subir ou cortina; evite pop e máquina de escrever.
3. **Escolha um estilo por post** Misturar entradas num mesmo quadro parece modelo se exibindo. A consistência é o que faz o movimento parecer da marca.
4. **Defina a pausa** Depois que a última palavra assenta, segure o quadro o tempo de ler duas vezes. Os stories avançam sozinhos, então isso importa mais nos [Stories do Instagram](https://gradiently.design/pt-br/guide/instagram-story-design).
5. **Assista no mudo, no celular** É assim que muitos dos seus espectadores vão ver. Se alguma linha for difícil de pegar, desacelere ou corte palavras.

### Evite

- Cada linha com uma animação diferente
- Letras girando, virando ou quicando repetidamente
- Texto ainda se mexendo quando o story avança
- Pop numa frase inteira
- Texto animado sobre um vídeo agitado e rápido

### Faça

- Um estilo para o post ou a série inteira
- Uma entrada, depois quietude
- Uma pausa clara antes do próximo quadro
- Pop em uma a três palavras
- Um fundo calmo, de movimento lento, sob as palavras

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

Num site, os mesmos quatro estilos levam poucas linhas de CSS cada. Mantenha-os curtos, execute uma vez e desligue 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; }
}
```

Ajuste a largura e os steps da máquina de escrever ao número de caracteres da sua linha. Para linhas em fontes proporcionais, revele letra por letra com um script pequeno.

As curvas importam tanto quanto as durações; [suavização de movimento](https://gradiently.design/pt-br/guide/easing) explica por que subir deve desacelerar e pop deve passar do ponto. Para o ofício mais amplo de tipografia em movimento, veja [tipografia cinética](https://gradiently.design/pt-br/guide/variable-font-animation).

## Animando texto no Gradiently

O Studio do Gradiently tem essas quatro animações de texto, subir, pop, cortina e máquina de escrever, para qualquer camada de texto, sobre um Mark que pode se mover devagar atrás das palavras. O Mark mantém sua área mais calma sob o texto enquanto se move, então as linhas continuam legíveis durante toda a animação. Com o Pro, você exporta stories e Reels como GIF, ou como MP4 ou WebM onde o navegador permite gravação. [Stories animados do Instagram](https://gradiently.design/pt-br/guide/animated-instagram-story) e [GIF ou MP4](https://gradiently.design/pt-br/guide/gif-vs-mp4) ajudam a escolher o formato.

## FAQ

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

Subir é o padrão mais seguro para a maioria dos stories. Use pop para palavras curtas e urgentes, cortina 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 fica boa entre cerca de 250 e 800 milissegundos, seguida de uma pausa longa o bastante para ler a linha duas vezes.

### Como fazer um efeito de texto máquina de escrever?

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

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

Em geral não. Um estilo ao longo de um post, ou de uma série inteira, parece deliberado e de marca; misturar estilos parece poluído.