Animation CSS : Texte avec effet machine à écrire en CSS pur

Vous avez déjà vu ce texte qui s’affiche lettre après lettre, comme si un écrivain invisible tapait sur son clavier ? Cette animation CSS de texte avec effet machine à écrire donne immédiatement du caractère à une page. Il attire l’œil, crée une attente, et apporte une touche presque cinématographique à votre interface.

Comprendre comment créer un effet machine à écrire uniquement avec du CSS, sans JavaScript.
Maîtriser les bases essentielles des animations CSS (largeur, keyframes, steps, curseur clignotant).
Adapter et améliorer l’animation pour obtenir un rendu professionnel, fluide et responsive, prêt à être intégré sur un site réel.

Aujourd’hui, vous allez apprendre à coder un effet machine à écrire en CSS pur, sans JavaScript. Oui, uniquement avec du HTML et CSS. Et rassurez-vous : même si vous débutez, vous allez comprendre chaque étape. On va prendre le temps. On va démonter le mécanisme pièce par pièce. Et à la fin, vous saurez non seulement reproduire l’animation, mais aussi l’améliorer.

Comprendre l’effet machine à écrire
La structure HTML minimale
Premier principe : cacher le texte
Deuxième principe : l’animation en largeur
- Pourquoi steps() est indispensable
Ajouter le curseur clignotant
Améliorer la qualité de l’animation
Code complet de l'animation de texte façon machine à écrire en CSS pur
- HTML
- CSS
Rendre l’effet responsive
Les erreurs courantes pour l'animation machine à écrire
Peut-on faire plusieurs lignes ?
Pourquoi choisir du CSS pur pour cette animation de machine à écrire ?

Comprendre l’effet machine à écrire

Avant d’écrire la moindre ligne de code, il faut comprendre ce que l’on veut vraiment faire.

Un texte avec effet machine à écrire repose sur trois éléments principaux :

Le texte apparaît progressivement.
Il donne l’illusion qu’il est tapé caractère par caractère.
Un curseur clignotant accompagne souvent l’animation.

En CSS pur, nous n’avons pas accès aux caractères individuellement comme en JavaScript. Alors comment simuler cette apparition progressive ?

La réponse tient en un mot : overflow.

Nous allons cacher le texte, puis révéler progressivement sa largeur.

L’animation ci-dessous tourne volontairement en boucle pour que vous puissiez voir le résultat plusieurs fois.

Apprenez à coder avec passion

La structure HTML minimale

Commençons par la base. Créez un fichier HTML simple.

<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="UTF-8">
<title>Effet machine à écrire en CSS pur</title>
<link rel="stylesheet" href="style.css">
</head>
<body>

<h1 class="machine">
  Bienvenue sur mon Créa Blog
</h1>

</body>
</html>

Rien de compliqué ici. Un simple titre avec une classe machine.

Pourquoi une classe ? Parce qu’on veut cibler uniquement ce texte pour l’animation.

Premier principe : cacher le texte

Passons au fichier style.css.

body {
  background: #111;
  color: #f5f5f5;
  font-family: "Courier New", monospace;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
}

.machine {
  overflow: hidden;
  white-space: nowrap;
  border-right: 3px solid #f5f5f5;
}

Prenons le temps d’expliquer.

overflow: hidden; : Cela cache tout ce qui dépasse du conteneur.
white-space: nowrap; : Empêche le texte d’aller à la ligne. On veut une seule ligne continue.
border-right : C’est notre futur curseur.

Pour l’instant, le texte s’affiche normalement. Rien d’animé. Mais les fondations sont posées.

Deuxième principe : l’animation en largeur

Maintenant, nous allons utiliser @keyframes.

L’idée est simple :

Au départ, la largeur est de 0.
À la fin, elle atteint 100%.

Ajoutez ceci :

.machine {
  overflow: hidden;
  white-space: nowrap;
  border-right: 3px solid #f5f5f5;
  width: 0;
  animation: typing 4s steps(30) forwards;
}

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

Pause pédagogique.

animation: typing 4s steps(30) forwards;

typing : nom de l’animation
4s : durée
steps(30) : nombre d’étapes
forwards : garde l’état final

Le secret magique ici, c’est steps().

👉 Aller plus loin : La propriété animation en CSS

Pourquoi steps() est indispensable

Sans steps(), l’animation serait fluide. Le texte apparaîtrait progressivement… mais en glissant.

Or nous voulons un effet machine à écrire : Lettre par lettre.

steps(30) signifie :

Diviser l’animation en 30 étapes nettes.

Chaque étape correspond approximativement à un caractère.

Si votre phrase fait 30 caractères, mettez 30 étapes. Si elle en fait 40, ajustez. C’est simple… mais puissant.

Ajouter le curseur clignotant

Une machine à écrire sans curseur, c’est un peu triste. On va lui donner vie.

Ajoutez cette animation :

.machine {
  overflow: hidden;
  white-space: nowrap;
  border-right: 3px solid #f5f5f5;
  width: 0;
  animation: typing 4s steps(30) forwards,
             blink 0.8s infinite;
}

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

Explication.

Formation web et informatique - Alban Guillier - Formateur

Des formations informatique pour tous !

Débutant ou curieux ? Apprenez le développement web, le référencement, le webmarketing, la bureautique, à maîtriser vos appareils Apple et bien plus encore…

Formateur indépendant, professionnel du web depuis 2006, je vous accompagne pas à pas et en cours particulier, que vous soyez débutant ou que vous souhaitiez progresser. En visio, à votre rythme, et toujours avec pédagogie.

Découvrez mes formations Qui suis-je ?

L’animation blink alterne la couleur de la bordure. À 50% du cycle, elle devient transparente.

Résultat : un curseur qui clignote. Simple. Élégant. Efficace.

Améliorer la qualité de l’animation

Maintenant, on passe au niveau supérieur.

Un effet machine à écrire en CSS pur peut être beaucoup plus travaillé.

Ajuster la vitesse intelligemment

La durée doit dépendre de la longueur du texte.

Un bon ratio :

0.08 seconde par caractère

Donc pour 40 caractères :

40 × 0.08 = 3.2 secondes

Cela rend l’animation naturelle.

Ajouter un léger délai

Parfois, laisser 1 seconde avant le démarrage crée une vraie tension visuelle.

animation: typing 4s steps(30) 1s forwards,
           blink 0.8s infinite;

Le 1s est le délai avant le départ de l’animation CSS de la machine à écrire.

Rendre le curseur plus élégant

Essayez une couleur légèrement atténuée :

border-right: 2px solid rgba(255,255,255,0.75);

C’est plus subtil. Moins agressif.

Code complet de l’animation de texte façon machine à écrire en CSS pur

Voici une version travaillée, prête à intégrer dans votre site.

HTML

<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="UTF-8">
<title>Effet machine à écrire en CSS pur</title>
<link rel="stylesheet" href="style.css">
</head>
<body>

<div class="container">
  <h1 class="machine">
    Apprenez à coder avec passion
  </h1>
</div>

</body>
</html>

CSS

body {
  background: linear-gradient(135deg, #0f2027, #203a43, #2c5364);
  color: #ffffff;
  font-family: "Courier New", monospace;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
  margin: 0;
}

.container {
  text-align: center;
}

.machine {
  font-size: 2rem;
  overflow: hidden;
  white-space: nowrap;
  border-right: 2px solid rgba(255,255,255,0.75);
  width: 0;
  animation: typing 3.5s steps(28) 0.5s forwards,
             blink 0.8s infinite;
}

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

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

Rendre l’effet responsive

Un piège fréquent : sur mobile, le texte peut être trop large.

Ajoutez :

.machine {
  max-width: 90%;
}

Et éventuellement :

@media (max-width: 600px) {
  .machine {
    font-size: 1.2rem;
  }
}

Les erreurs courantes pour l’animation machine à écrire

Vous allez sûrement rencontrer l’un de ces cas.

Le texte saute à la ligne ? Vous avez oublié white-space: nowrap.
L’animation est fluide et non saccadée ? Vous avez oublié steps().
Le texte disparaît après l’animation ? Il manque forwards.

Ce sont des petits détails… mais ils changent tout.

Peut-on faire plusieurs lignes ?

Oui, mais avec une approche différente.

Pour plusieurs lignes, on peut :

Animer plusieurs blocs successivement
Utiliser des délais différents
Ou jouer sur animation-delay

Exemple rapide :

.line1 {
  animation: typing 3s steps(20) forwards;
}

.line2 {
  animation: typing 3s steps(20) 3s forwards;
}

La seconde ligne démarre après la première.

Pourquoi choisir du CSS pur pour cette animation de machine à écrire ?

Vous pourriez utiliser JavaScript. Mais le CSS pur présente plusieurs avantages :

Performance meilleure
Moins de code
Moins de dépendances
Animation fluide et optimisée

Et surtout… vous comprenez vraiment ce que vous faites.

Créer un effet machine à écrire en CSS pur, ce n’est pas seulement une animation. C’est comprendre comment le CSS peut manipuler le temps, la largeur, et le rythme pour produire une illusion.

Vous venez d’apprendre à maîtriser overflow, white-space, @keyframes, steps(), et le clignotement du curseur. Ce sont des outils simples, mais combinés intelligemment, ils donnent un rendu professionnel.

Maintenant, amusez-vous. Testez différentes polices. Jouez avec les délais. Expérimentez plusieurs lignes. Transformez une simple phrase en une entrée spectaculaire.

Et la prochaine fois que vous verrez un texte s’écrire tout seul à l’écran… vous saurez exactement comment il fonctionne.

Alban Guillier

Fondateur de l’agence Créa-troyes, affiliée France Num
Intervenant en Freelance.
Contactez-moi

crea-troyes.fr