Je suis
Développeur
Interfaces rapides et accessibles depuis 2018.
TexteGratuit
Typing Effect
Animation CSS pure qui révèle le texte caractère par caractère derrière un curseur indigo clignotant — zéro JavaScript, un seul <span>.
Hello World
Survolez ou cliquez la scène pour interagir
Cet effet est gratuit — la catégorie Texte en contient 56 au total, dont 4 gratuits. Effect.Labs regroupe 811 effets vanilla. Découvrir la catégorie →
Exemples d'usage
~/projet $
npm install effect-libs
✓ added 1 package in 0.312s
✓ 0 vulnérabilités détectées
AI
Assistant IA
Comment centrer un div en CSS ?
Ajoute display:flex au conteneur.
Posez votre question…
↑
Comment ça marche
L'effet repose entièrement sur deux @keyframes CSS sans une ligne de JavaScript. La propriété width part de 0 et s'anime jusqu'à 100% grâce à la fonction de temporisation steps(20) : au lieu d'une interpolation lisse, le navigateur saute 20 paliers discrets, ce qui simule l'apparition lettre par lettre. overflow: hidden cache le texte excédentaire à droite tant que la largeur n'a pas atteint la valeur du palier ; white-space: nowrap empêche le retour à la ligne qui briserait l'illusion.
L'animation typing suit une courbe en plateau : de 0 % à 30 % du cycle, la largeur passe de 0 à 100 % (frappe) ; elle reste pleine de 30 % à 60 % (texte lisible, pause naturelle) ; puis de 60 % à 90 % elle revient à 0 (effacement avec le même steps(20) en sens inverse). De 90 % à 100 %, la largeur reste à 0 — une micro-pause avant la prochaine frappe.
Le curseur est simulé par border-right: 3px solid rgb(99, 102, 241) posé directement sur le <span> — aucun pseudo-élément, aucun nœud DOM supplémentaire. L'animation blink (0,5 s, timing step-end, direction alternate) bascule la couleur du bord entre l'indigo et transparent : le saut instantané de step-end reproduit le clignotement carré d'un vrai terminal, sans fondu.
max-width: fit-content empêche le span de s'étirer sur toute la ligne quand il est enfant d'un conteneur flex ou grid large — sans cette règle, la bordure-curseur s'afficherait à droite du bloc, loin du dernier caractère. Les deux animations tournent en boucle infinie et indépendante sur le même élément.
Accessibilité
- prefers-reduced-motion absent : le code source ne contient aucune media query
prefers-reduced-motion. L'animation tourne en continu même chez les utilisateurs sensibles. Correctif recommandé : ajouter@media (prefers-reduced-motion: reduce) { .text-typing { animation: none; width: 100%; border-right: none; } }. - Le
<span>contient du texte réel lu normalement par les lecteurs d'écran — aucune information n'est encodée dans l'animation elle-même. - Aucun attribut
aria-livesur l'élément : si le texte change dynamiquement via JS (cycle de phrases), ajouteraria-live="polite"pour que les mises à jour soient annoncées. - Aucun élément interactif dans l'effet — la navigation au clavier n'est pas concernée par l'effet lui-même.
- La couleur du curseur (
rgb(99, 102, 241)— indigo-500) atteint un ratio ≥ 4,5:1 sur fond sombre (#0a0a0f) ; la couleur du texte hérite du contexte d'intégration, dont le contraste est à la charge de l'intégrateur.
Compatibilité navigateur
Effet CSS pur — @keyframes, steps() et max-width: fit-content couvrent l'essentiel du parc moderne. Zéro dépendance.
Chrome 46+✓ Complet
Firefox 94+✓ Complet
Safari 11+✓ Complet
Edge 79+✓ Complet
Mobile iOS 11+✓ Complet
Android Chrome 46+✓ Complet
Sur Firefox avant 94, <code>max-width: fit-content</code> n'est pas reconnu : la bordure-curseur peut s'étirer visuellement, sans bloquer la lecture du texte. Sans support <code>@keyframes</code>, le texte s'affiche en entier statiquement — aucune erreur JS, contenu toujours lisible.
Le code
Copiez les trois blocs dans votre page. Aucune dépendance.
HTML
<span class="demo-text text-typing">Hello World</span>
CSS
.demo-text {
font-size: 2.5rem;
font-weight: 800;
letter-spacing: -0.02em;
}
.text-typing {
overflow: hidden;
border-right: 3px solid rgb(99, 102, 241);
white-space: nowrap;
animation: 3s steps(20) 0s infinite normal none running typing, 0.5s step-end 0s infinite alternate none running blink;
width: 0px;
max-width: fit-content;
}
@keyframes typing {
0%, 90%, 100% {
width: 0px;
}
30%, 60% {
width: 100%;
}
}
@keyframes blink {
50% {
border-color: transparent;
}
}
JavaScript (fx-0630)
// Effet CSS pur — pas de JavaScript nécessairePersonnaliser
Options passées à l'API ou attributs data-* :
| Option / propriété | Défaut | Effet |
|---|---|---|
| steps(20) | 20 | Nombre de paliers discrets de l'animation de frappe — doit approximer le nombre de caractères du texte (espaces inclus). Trop bas : sauts grossiers ; trop haut : quasi-continu, perd le style typewriter. |
| 3s (durée de typing) | 3s | Durée totale du cycle (frappe + pause + effacement). Allonger à 4–6 s pour du texte long ou un rythme de lecture confortable. |
| 0.5s (durée de blink) | 0.5s | Vitesse du clignotement du curseur. 0,5 s = terminal classique ; 1 s = curseur lent ; 0,3 s = curseur nerveux. |
| border-right: 3px solid rgb(99, 102, 241) | 3px, indigo-500 | Épaisseur et couleur du curseur. Remplacez la couleur par votre teinte brand. 4 px donne un curseur bloc typique des IDE ; 2 px un curseur fin éditorial. |
| font-size: 2.5rem (.demo-text) | 2.5rem | Taille du texte animé. Hero grand format : 3–4 rem ; sous-titre : 1–1,5 rem ; terminal : 0,9–1,1 rem. |
| font-weight: 800 (.demo-text) | 800 | Graisse. 400 pour un corps de texte ou un terminal ; 700 pour un titre standard ; 900 pour un impact maximal. |
| letter-spacing: -0.02em (.demo-text) | -0.02em | Espacement entre caractères. Valeur négative = texte resserré (moderne, gras) ; 0 ou légèrement positif = aéré (éditorial, corps de texte). |
FAQ
Comment adapter la valeur de steps() à mon texte ?
Comptez les caractères de votre texte, espaces inclus, et utilisez une valeur proche. Pour « Hello World » (11 chars), steps(11) à steps(14) est naturel. Un nombre trop faible produit des sauts visibles entre groupes de caractères ; trop élevé rend la progression quasi-continue et perd le rendu typewriter.
Comment faire défiler plusieurs textes différents avec cet effet ?
L'effet CSS seul anime un texte fixe en boucle. Pour cycler entre plusieurs phrases, deux approches : (1) CSS pur — empilez des <span class="text-typing"> en position: absolute avec des animation-delay décalés d'un multiple de la durée du cycle ; (2) JS léger — écoutez l'événement animationiteration sur le span et mettez à jour son textContent entre deux cycles.
L'effet fonctionne-t-il sur fond clair ?
Oui. L'effet ne fixe aucune couleur de fond ni de texte. Adaptez uniquement border-right-color pour que le curseur reste visible sur votre fond (ex. #1e293b sur blanc). La couleur du texte hérite de votre stylesheet ; aucune propriété d'arrière-plan n'est définie par l'effet lui-même.
