# Animations de texte : rise, pop, wipe et typewriter

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

Inutile de connaître cinquante effets. Quatre entrées, bien choisies et bien minutées, suffisent pour stories, Reels, annonces et citations. Voici laquelle employer quand.

## The short version

- Rise, pop, wipe et typewriter sont quatre styles d’animation de texte qui couvrent la plupart des posts pour les réseaux sociaux.
- Rise convient aux messages calmes, premium et éditoriaux ; pop convient aux mots courts et énergiques comme les prix et les offres.
- Wipe dévoile une ligne comme un rideau et sert aux titres et aux révélations avant-après ; typewriter convient aux citations, aux questions et à tout ce qui doit sembler écrit sur le moment.
- La plupart des animations d’entrée se lisent mieux entre un quart et trois quarts de seconde, suivies d’une tenue assez longue pour lire la ligne deux fois.
- Employez un seul style d’animation par post ou par série, et décalez les lignes plutôt que d’animer chaque mot différemment.

Pour les posts sociaux, quatre styles d’**animation de texte** font presque tout : **rise** (les mots montent en douceur en apparaissant, calme et premium), **pop** (les mots grossissent avec un petit rebond, court et fort), **wipe** (une ligne se dévoile d’un côté, comme un rideau) et **typewriter** (les lettres apparaissent une à une, comme si on écrivait à l’instant). Accordez le style au message, gardez chaque entrée sous trois quarts de seconde environ, puis tenez les mots immobiles assez longtemps pour les lire deux fois. Un seul style par post : c’est l’essentiel du métier.

## Les quatre animations de texte en un coup d’œil

| Animation | Ambiance | À employer pour | Durée d’entrée |
| --- | --- | --- | --- |
| Rise | Calme, assurée, premium | Titres, lancements, citations, posts éditoriaux | 400 à 700 ms |
| Pop | Énergique, ludique, urgent | Prix, offres, mots d’accroche, comptes à rebours | 250 à 400 ms |
| Wipe | Précis, cinématographique, révélateur | Titres, révélations, avant et après | 500 à 800 ms |
| Typewriter | Personnel, curieux, sur le vif | Questions, citations, conseils, coulisses | 30 à 60 ms par lettre |

Points de départ pour chaque style. Plus lent fait plus cher ; plus rapide fait plus urgent. Allez trop loin dans un sens ou l’autre et les gens cessent de lire.

## Rise : le choix sûr et premium par défaut

Rise fait monter chaque ligne d’une courte distance en la faisant apparaître en fondu, puis la laisse se poser. Comme le mouvement est petit et ralentit, l’œil lit les mots presque dès qu’ils commencent à apparaître. C’est le bon choix par défaut pour les marques qui veulent paraître calmes : hôtels, studios, soins de la peau, architecture, cabinets de conseil.

Un post social en portrait annonçant une collection d’automne, avec un surtitre, un titre et une ligne de détail

Un post de lancement qui convient à rise : le surtitre d’abord, puis le titre, puis le détail, chacun arrivant un temps après le précédent.

Décalez les lignes d’environ 100 à 150 millisecondes pour qu’elles cascadent. Ne décalez les mots que sur des lignes très courtes ; décaler les lettres avec rise fait tatillon.

## Pop : pour les mots courts qui doivent frapper

Pop agrandit un mot à partir d’une taille légèrement plus petite, dépasse un peu et se pose. Il a de l’énergie, donc il convient aux mots à faire claquer : un prix, un pourcentage, « Complet », « Ce soir », « Dernier jour ». Il échoue sur les longues phrases, qui tremblent au lieu d’atterrir.

Une story de soldes verticale avec les mots Dernier jour en grand et Fin à minuit en dessous

Deux mots qui claquent : courts, urgents, lus en un instant.

## Wipe : dévoiler un titre comme un rideau

Wipe découvre une ligne d’un bord à l’autre : les mots apparaissent dans l’ordre de lecture sans bouger. L’effet est posé et cinématographique, et comme les lettres elles-mêmes restent en place, c’est l’une des entrées les plus lisibles. Employez-le pour des titres, pour une ligne « avant » balayée afin de révéler un « après », ou pour un nom dévoilé à la fin d’une vidéo.

Faites le wipe dans le sens de la lecture : de gauche à droite en français et dans la plupart des langues européennes. Un wipe à contresens donne l’impression qu’on retire le texte.

## Typewriter : des mots écrits sur le vif

Typewriter révèle les lettres une à une. Il est plus lent que les trois autres, et c’est son intérêt : il rend une ligne personnelle, comme si quelqu’un vous écrivait à l’instant. Employez-le pour des questions, de courtes citations, des conseils et des notes de coulisses. Gardez la ligne courte, car toute la phrase doit finir de s’écrire avant d’être lue, et il faut encore une tenue.

Une story verticale demandant Qu’est-ce qu’on cuisine vendredi, avec de la place dessous pour un sondage

Une question convient à typewriter : on dirait qu’une personne la tape en direct, pour vous. Assez courte pour finir en environ une seconde.

> **Le calcul du typewriter** À 40 ms par lettre, une ligne de 30 lettres met 1,2 seconde à s’écrire, plus environ deux secondes de tenue. Une ligne de quinze mots dépasse trois secondes avant même le début de la tenue : coupez des mots ou répartissez-les sur plusieurs cadres.

## Choisir la bonne animation de texte

1. **Partez du message** Une nouvelle calme monte. Une nouvelle urgente claque. Une révélation se dévoile. Une note personnelle s’écrit.
2. **Comptez les mots** Un à trois mots acceptent n’importe quel style. Les longues lignes marchent mieux avec rise ou wipe ; évitez pop et typewriter.
3. **Un style par post** Mélanger les entrées dans un même cadre ressemble à un modèle qui fait son show. La constance rend le mouvement reconnaissable.
4. **Réglez la tenue** Une fois le dernier mot posé, tenez le cadre assez longtemps pour le lire deux fois. Les stories avancent toutes seules : cela compte surtout dans les [stories Instagram](https://gradiently.design/fr/guide/instagram-story-design).
5. **Regardez-le en muet sur un téléphone** C’est ainsi que beaucoup de vos spectateurs le verront. Si une ligne est difficile à saisir, ralentissez ou coupez des mots.

### À éviter

- Chaque ligne avec une animation différente
- Des lettres qui tournent, se retournent ou rebondissent en boucle
- Du texte encore en mouvement quand la story avance
- Pop sur une phrase entière
- Du texte animé sur une vidéo chargée et rapide

### À faire

- Un seul style pour tout le post ou la série
- Une entrée, puis l’immobilité
- Une tenue claire avant le cadre suivant
- Pop sur un à trois mots
- Un fond calme et lent sous les mots

## Animations de texte CSS à copier

Sur un site web, les mêmes quatre styles tiennent en quelques lignes de CSS chacun. Gardez-les courts, jouez-les une seule fois et coupez-les pour les personnes qui préfèrent le mouvement réduit.

```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; }
}
```

Réglez la largeur et les steps du typewriter sur le nombre de caractères de votre ligne. Pour des lignes en police proportionnelle, révélez lettre par lettre avec un petit script.

Les courbes comptent autant que les durées ; [l’easing](https://gradiently.design/fr/guide/easing) explique pourquoi rise doit ralentir et pop dépasser. Pour le métier plus large du texte en mouvement, voyez la [typographie cinétique](https://gradiently.design/fr/guide/variable-font-animation).

## Animer du texte dans Gradiently

Le Studio de Gradiently propose ces quatre animations de texte, rise, pop, wipe et typewriter, pour n’importe quel calque de texte, sur un Mark qui peut bouger lentement derrière les mots. Le Mark garde sa zone la plus calme sous le texte pendant qu’il bouge : les lignes restent lisibles tout au long de l’animation. Avec Pro, vous exportez stories et Reels en GIF, ou en MP4 ou WebM là où le navigateur prend en charge l’enregistrement. Les [stories Instagram animées](https://gradiently.design/fr/guide/animated-instagram-story) et [GIF ou MP4](https://gradiently.design/fr/guide/gif-vs-mp4) aident à choisir le format.

## FAQ

### Quelle est la meilleure animation de texte pour les stories Instagram ?

Rise est le choix par défaut le plus sûr pour la plupart des stories. Utilisez pop pour les mots courts et urgents, wipe pour les révélations et typewriter pour les questions ou notes personnelles.

### Combien de temps une animation de texte doit-elle durer ?

La plupart des entrées se lisent bien entre 250 et 800 millisecondes environ, suivies d’une tenue assez longue pour lire la ligne deux fois.

### Comment faire un effet de texte machine à écrire ?

Révélez un caractère à la fois, à environ 30 à 60 millisecondes par lettre. En CSS, animez la largeur d’une ligne monospace avec steps() égal à son nombre de caractères.

### Faut-il employer plusieurs animations de texte dans un même post ?

En général non. Un style sur un post, ou toute une série, fait voulu et reconnaissable ; mélanger les styles fait chargé.