01
se rejoue à l’affichage
Brouillage
Le bruit se transforme en signal, de gauche à droite.
Catalogue d'animation texte · CSS & JS
Animation texte :
Animation texte :
chaque mot peut bouger.
Trente animations de texte en CSS et JavaScript, composées comme un livre d'animations typographiques. Faites défiler la page pour déclencher chaque planche ; lorsqu’une animation indique survolez ou déplacez le curseur, il réagit directement à vos gestes.
5 catégories
30 animations
30 idées à ajouter
Qu’est-ce qu’une animation texte ?
Une animation texte met en mouvement des lettres, des mots ou des lignes pour attirer le regard, hiérarchiser l’information ou donner du caractère à une interface. Chacune des 30 démos ci-dessous est écrite en CSS et en JavaScript natif, sans bibliothèque externe.
Elles se répartissent en cinq familles : apparition, boucle, interaction, sortie et effets expérimentaux. Bien dosée, une animation de texte renforce la lisibilité et l’expérience utilisateur ; trop présente, elle les dégrade. Besoin d’une animation texte sur votre site ? Parlons de votre projet.
Catégorie 01
Animations de texte d’apparition
02
se rejoue à l’affichage
Machine à écrire
Une frappe à la fois, curseur compris.
03
se rejoue à l’affichage
Tableau à palettes
Chaque lettre défile sur son propre tableau des départs.
04
se rejoue à l’affichage
Fondu échelonné
Les lettres montent à leur place, l’une après l’autre.
Lennouille
05
se rejoue à l’affichage
Mise au point
Du flou à la netteté.
Lennouille
06
en continu
Glitch dédoublé
Des fantômes rouges et cyan s’écartent de la position réelle.
Lennouille
07
se rejoue à l’affichage
Signature à l’encre
Un trait se dessine sous le mot.
Lennouille
08
se rejoue à l’affichage
Rideau
Une plaque pleine glisse pour révéler le mot en dessous.
Lennouille
09
se rejoue à l’affichage
Retournement 3D
Les lettres se rabattent depuis une charnière, comme des fiches de Rolodex.
Lennouille
Catégorie 02
Animations de texte en boucle
10
en continu
Vague
Une ondulation parcourt la ligne de base en continu.
Lennouille
11
en continu
Reflet balayant
Une bande de lumière glisse sur des lettres en laiton.
Lennouille
12
en continu
Halo respirant
La lumière s’accumule puis se relâche, lente comme un souffle retenu.
Lennouille
13
en continu
Ondulation liquide
Chaque lettre semble suspendue dans du sirop.
Lennouille
14
en continu
Défilement amorti
Un bandeau qui accélère, glisse puis se pose — jamais linéaire.
Lennouille
Lennouille
Lennouille
15
en continu
Rotateur cinétique
Un rôle, plusieurs mots, qui défilent comme un titre.
Conçu par Lennouille
Catégorie 03
Animations de texte interactives
16
Attraction magnétique
Les lettres se penchent vers votre curseur à son approche.
Lennouille
déplacez le curseur
17
Progression au scroll
La couleur remplit le mot au rythme du défilement.
Lennouille
faites défiler la page
18
Dispersion au survol
Le mot se disperse au moindre contact, puis se reforme.
Lennouille
survolez
19
Épaisseur dynamique
Les lettres s’épaississent à mesure que le curseur s’approche.
Lennouille
déplacez le curseur
20
Distorsion au curseur
Un effet fisheye d’inclinaison et d’échelle suit votre pointeur.
Lennouille
déplacez le curseur
Catégorie 04
Animations de texte de sortie
21
Éclatement
Les lettres s’éparpillent chacune sur sa propre trajectoire.
Lennouille
survolez
22
Dissolution
Le mot s’élève, se brouille et se disperse comme de la fumée.
Lennouille
survolez
23
Pliage
La ligne se replie à plat vers son centre.
Lennouille
survolez
24
en continu
Cycle terminal
Tapé, maintenu, effacé, puis retapé.
Catégorie 05
Animations de texte expérimentales
25
en continu
Graisse variable
Une seule police, qui respire entre sa graisse la plus fine et la plus lourde.
Lennouille
26
se rejoue à l’affichage
Formation matricielle
Une pluie de caractères se fige pour former le mot.
27
en continu
Métamorphose de mots
Un mot se dissout pendant qu’un autre prend sa place.
Lennouille
Lenny Gadroy
28
Scroll chromatique
Les canaux de couleur se dissocient près des bords de l’écran et se réunissent au centre.
Lennouille
faites défiler la page
29
se rejoue à l’affichage
Chute libre
Les lettres tombent, rebondissent et se stabilisent sous leur propre poids.
Lennouille
30
balayage auto au repos
Projecteur
Un faisceau de lumière suit votre curseur et révèle le mot caché dans l’obscurité.
Lennouille
déplacez le curseur
01 / 30