La réponse courte

Pour du texte animé sur une page, CSS steps() suffit. Pour un fichier à partager dans des chats, documents ou diapositives, utilisez un créateur de GIF dans le navigateur.

Effet machine à écrire en CSS pur

Pour une ligne de texte sur le Web, l’astuce CSS classique anime la largeur de l’élément avec steps() afin que les lettres apparaissent comme si elles étaient tapées, tandis qu’une bordure droite sert de curseur :

.typewriter {
  overflow: hidden;
  white-space: nowrap;
  border-right: 0.15em solid currentColor;
  width: 0;
  animation:
    typing 3s steps(11, end) forwards,
    blink 0.8s step-end infinite;
}

@keyframes typing {
  from { width: 0; }
  to   { width: 100%; }
}

@keyframes blink {
  50% { border-color: transparent; }
}

Le nombre de steps(11, end) doit correspondre au nombre de caractères, et 3s règle la vitesse. Cette méthode convient aux titres, mais le texte multiligne, les polices personnalisées et l’export de fichier sont peu pratiques en CSS pur.

Besoin d’un fichier ?

Notre créateur de GIF de texte dactylographié exporte la même animation en GIF en boucle, prêt à être utilisé partout.

Créer un GIF

Bibliothèques de composants front-end

Avec React ou Vue, les bibliothèques de composants proposent un effet prêt à l’emploi avec des options de vitesse, de curseur et de boucle. Framer inclut des variantes de frappe, MagicUI fournit un composant TypingAnimation, et des paquets comme react-type-animation ou typed.js s’installent en une commande.

Pour transformer l’aspect du composant en fichier portable, générez-le avec le créateur de GIF gratuit.

Logiciels de montage vidéo

Pour un rendu plus soigné, le montage vidéo reste la voie classique. Dans CapCut, ajoutez un calque de texte et appliquez l’animation « Typewriter ». Dans After Effects, une expression Source Text découpe la chaîne caractère par caractère, avec un petit rectangle en guise de curseur clignotant. Le contrôle est total, mais chaque modification demande un nouveau rendu.

Si vous voulez seulement une boucle propre sans timeline, le créateur de GIF la produit en quelques secondes.

Créateur de GIF en ligne gratuit (recommandé)

Pour les chats, les README, les publications et la documentation, un GIF en boucle est le format le plus portable, sans logiciel à installer :

Saisissez le texte : jusqu’à 200 caractères, retours à la ligne acceptés.
Choisissez style et vitesse : neuf polices, couleurs personnalisées ou fond transparent, curseur, quatre formats de canevas et cinq vitesses.
Téléchargez le GIF : généré dans votre navigateur, gratuit et sans filigrane.

Essayez le créateur de GIF de texte dactylographié : tout se passe dans le navigateur, sur iPhone et Android, sans inscription.