L’essentiel en bref
- 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.
Sur cette page
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
À employer pour
Durée d’entrée
À employer pour
Durée d’entrée
À employer pour
Durée d’entrée
Ambiance
À employer pour
Durée d’entrée
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 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.
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 question convient à typewriter : on dirait qu’une personne la tape en direct, pour vous. Assez courte pour finir en environ une seconde.
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.
- 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.
/* 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; }
}Les courbes comptent autant que les durées ; l’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.
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 et GIF ou MP4 aident à choisir le format.
Les questions qu’on nous pose
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é.
Écrit par Gradiently
L’équipe derrière Gradiently, un outil de création construit autour des Marks : des dégradés vivants qui donnent à tout ce que vous créez votre propre signature.
Voir notre profil