L'animation d'interface, par opposition au mouvement au defilement. Ici tout part d'une ACTION : un clic, une saisie, l'arrivee d'une reponse. Cinq regles tenues partout : on n'anime que transform et opacity (animer une largeur force un recalcul de mise en page a chaque image), une transition dure 120 a 320 ms, la courbe compte plus que la duree, l'entree est plus lente que la sortie, et prefers-reduced-motion supprime le mouvement sans jamais supprimer l'information. Passez la souris sur une demonstration pour la rejouer.
A. Micro-interactions
Icone qui se transforme, coche qui se trace, case, favori, champ au focus, bouton d'envoi. Le retour le plus frequent d'une interface.
Icone qui se transforme
Le menu qui devient croix, la lecture qui devient pause. Les deux etats sont le MEME objet : c'est ce qui fait comprendre que le bouton refermera ce qu'il vient d'ouvrir.
les trois barres pivotent et se rejoignent ; aucune icone n'est remplacee
Coche qui se trace
La confirmation d'une action reussie. Le trait se dessine au lieu d'apparaitre : le regard suit le geste et comprend que quelque chose vient de se terminer.
stroke-dasharray + stroke-dashoffset animes de la longueur du trace a zero
Case et interrupteur
Le retour le plus frequent d'une interface. La coche se trace, la poignee s'etire pendant le glissement : deux details qui rendent le controle tangible.
scale(1.35) puis retour en cubic-bezier(.34,1.56,.64,1)
Champ qui prend le focus
L'anneau grandit depuis le bord au lieu d'apparaitre d'un coup, et l'intitule remonte. Deux details qui font percevoir le champ comme actif plutot que simplement surligne.
Voir le codeMasquer le code
<div class="demo-col demo-col--large">
<label class="an-champ"><input class="saisie" placeholder=" "><span>Nom du client</span></label>
<label class="an-champ"><input class="saisie" value="Krissi Julien" placeholder=" "><span>Nom du client</span></label>
</div>
label en translate + scale, anneau en box-shadow anime depuis 0
Bouton d'envoi
Le parcours complet d'une action : repos, envoi, succes, retour au repos. La largeur ne bouge pas d'un pixel, sinon la mise en page saute a chaque etape.
min-width figee avant le changement d'etat, transition sur background-color
B. Transitions d'etat
Accordeon fluide, onglet glissant, entree de modale, reordonnancement FLIP, suppression en deux temps, bandeau qui pousse le contenu.
Quelles aides puis-je obtenir ?
MaPrimeRenov, les CEE et la TVA a 5,5 % selon vos revenus et le logement. Nous montons le dossier et deduisons les aides du devis.
Combien de temps dure la pose ?
Une journee pour un chauffe-eau, deux a trois jours pour une pompe a chaleur avec depose de l'ancienne chaudiere.
Intervenez-vous en urgence ?
Oui, 7 jours sur 7, avec un delai moyen de 2 heures en Ile-de-France.
Accordeon fluide
Le repliement le plus demande et le plus souvent rate. `interpolate-size` rend `height: auto` animable : plus besoin de mesurer la hauteur en JavaScript.
Voir le codeMasquer le code
<div class="an-accordeon">
<details open><summary>Quelles aides puis-je obtenir ?<i></i></summary><div><p>MaPrimeRenov, les CEE et la TVA a 5,5 % selon vos revenus et le logement. Nous montons le dossier et deduisons les aides du devis.</p></div></details>
<details><summary>Combien de temps dure la pose ?<i></i></summary><div><p>Une journee pour un chauffe-eau, deux a trois jours pour une pompe a chaleur avec depose de l'ancienne chaudiere.</p></div></details>
<details><summary>Intervenez-vous en urgence ?<i></i></summary><div><p>Oui, 7 jours sur 7, avec un delai moyen de 2 heures en Ile-de-France.</p></div></details>
</div>
translateX(calc(var(--i) * 100%)) sur un trait de largeur 1/n
Envoyer le devis
Le voile se fond, la fenetre monte de 12 px en grandissant depuis 0,96.
Entree d'une modale
`@starting-style` permet d'animer l'apparition d'un element qui vient d'etre insere, sans classe ajoutee en JavaScript ni double `requestAnimationFrame`.
Voir le codeMasquer le code
<div class="modale-scene an-modale-scene">
<div class="modale__voile"></div>
<div class="modale an-modale">
<div class="modale__tete"><h3>Envoyer le devis</h3><button class="btn btn--fermer" aria-label="Fermer"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M18 6 6 18M6 6l12 12"/></svg></button></div>
<div class="modale__corps"><p>Le voile se fond, la fenetre monte de 12 px en grandissant depuis 0,96.</p></div>
<div class="modale__pied"><button class="btn btn--secondaire">Annuler</button><button class="btn btn--plein">Envoyer</button></div>
</div>
</div>
.an-modale {
animation: an-modale-entree 280ms var(--e-douce) both;
}
@keyframes an-modale-entree {
from { opacity: 0; transform: translateY(12px) scale(.96); }
}
.an-modale-scene .modale__voile { animation: an-fondu 240ms var(--e-douce) both; }
@keyframes an-fondu { from { opacity: 0; } }
/* Sur un vrai <dialog> ou un popover, @starting-style evite toute classe JS :
dialog[open] { opacity: 1 } @starting-style { dialog[open] { opacity: 0 } } */
La technique FLIP : on mesure les positions avant et apres, on applique la difference a rebours, puis on la laisse revenir a zero. C'est ce qui permet d'animer un changement de mise en page sans animer la mise en page.
La ligne se retire vers la droite puis sa hauteur se referme. En deux temps : sans cela, les lignes du dessous sautent avant que l'oeil ait compris ce qui partait.
grid-template-rows: 0fr vers 1fr, la seule facon d'animer une hauteur inconnue
C. Traces et formes
Trace de ligne SVG, jauge circulaire, barres qui montent, forme organique. Tout par stroke-dashoffset et transform, jamais par la geometrie.
Trace de ligne
Un logo, une signature ou un pictogramme qui se dessine. Le trace suit l'ordre des chemins dans le SVG : c'est lui qui donne l'impression d'une main qui ecrit.
Un histogramme qui se construit a l'arrivee dans le champ. Les barres partent de zero et se decalent legerement : le decalage suffit a donner un rythme.
transform-origin: bottom + scaleY(0) vers scaleY(1), decale de 60 ms par barre
Forme qui se deforme
Un fond organique qui respire. Les valeurs de `border-radius` sont interpolees entre trois etats : le mouvement parait continu sans jamais boucler visiblement.
huit valeurs de border-radius animees en boucle, durees premieres entre elles
D. Attentes
Six indicateurs de chargement et le choix entre eux, squelette calque sur le contenu, progression par etapes.
Tourniquet — moins de 2 s
Points — jusqu'a 5 s
Barre indeterminee — au-dela
Pulsation — attente passive
Onde — traitement par lots
Squelette — forme connue
Six indicateurs de chargement
Choisir selon la duree : un tourniquet sous 2 secondes, des points jusqu'a 5, une barre au-dela, et un squelette quand la forme du contenu est connue d'avance.
Voir le codeMasquer le code
<div class="an-chargements">
<div><span class="btn__spin an-spin"></span><small>Tourniquet — moins de 2 s</small></div>
<div><span class="an-points"><i></i><i></i><i></i></span><small>Points — jusqu'a 5 s</small></div>
<div><span class="an-barre"><i></i></span><small>Barre indeterminee — au-dela</small></div>
<div><span class="an-pulse"></span><small>Pulsation — attente passive</small></div>
<div><span class="an-onde-c"><i></i><i></i><i></i><i></i></span><small>Onde — traitement par lots</small></div>
<div><span class="an-squelette"></span><small>Squelette — forme connue</small></div>
</div>
six formes, une intention chacune ; jamais deux dans le meme ecran
Squelette calque sur le contenu
Le squelette prend la forme exacte de ce qui arrive : avatar rond, deux lignes, une valeur a droite. Toute autre forme fait sauter la page a l'arrivee des donnees.
memes dimensions que le contenu reel, sinon la page saute
Devis genereTermine
Converti en Factur-XTermine
Envoi au clientEn cours
4
Attente de signatureA venir
Progression par etapes
Un traitement long en plusieurs phases. Le trait de liaison se remplit entre deux etapes : c'est lui qui donne le sentiment d'avancer, plus que la pastille.
Une ligne qui vient d'etre ajoutee ou modifiee par quelqu'un d'autre. Le fond se teinte puis s'efface en deux secondes : assez pour etre vu, assez court pour ne pas rester.
Voir le codeMasquer le code
<ul class="liste" data-an-rejouer>
<li class="an-neuf"><a href="#"><span class="liste__bloc"><strong>Devis 2026-124</strong><small>Ajoute a l'instant par Sophie M.</small></span><span class="doc-etiq doc-etiq--ok">Nouveau</span></a></li>
<li><a href="#"><span class="liste__bloc"><strong>Devis 2026-121</strong><small>Il y a 2 heures</small></span></a></li>
<li><a href="#"><span class="liste__bloc"><strong>Devis 2026-118</strong><small>Hier</small></span></a></li>
</ul>
background-color anime de la teinte vers transparent en 2 s
Formule Pro
Relances automatiques et application mobile.
Formule Essentielle
Devis et factures illimites.
Reflet de passage
Un eclat qui traverse une carte pour signaler une nouveaute. A n'utiliser qu'une fois par ecran, et jamais en boucle : le regard s'y accroche et ne lit plus le reste.
::after en gradient translate de -120% a 120%, une seule fois
Halo d'appel
Un bouton qu'on veut faire remarquer sans le faire clignoter. L'anneau se dilate et s'efface : le mouvement est en peripherie de vision, il n'empeche pas de lire.
un anneau en ::after, scale(1) vers scale(1.4) avec opacity vers 0
F. Texte
Machine a ecrire, mots qui defilent, texte qui se decode, compteur. Le texte complet reste toujours dans le balisage.
Nous posons des pompes a chaleur depuis 2009.
Machine a ecrire
L'ouverture d'une page ou une demonstration. Le texte complet est dans le balisage : la lecture assistee et les moteurs de recherche voient la phrase entiere.
Voir le codeMasquer le code
<p class="an-frappe" data-an-frappe>Nous posons des pompes a chaleur depuis 2009.</p>
JS : on decoupe en caracteres, le curseur est un ::after clignotant
Nous posons des
pompes a chaleurchauffe-eauchaudieresclimatisations
depuis 2009.
Mots qui defilent
Une accroche dont un mot change. Le conteneur garde la largeur du mot le plus long, sinon la phrase se reorganise a chaque changement.
Voir le codeMasquer le code
<p class="an-defile-mots">
Nous posons des
<span class="an-defile" data-an-defile><i>pompes a chaleur</i><i>chauffe-eau</i><i>chaudieres</i><i>climatisations</i></span>
depuis 2009.
</p>
hauteur figee + translateY par pas d'une ligne, en boucle
RENOVATION ENERGETIQUE
Texte qui se decode
Un titre qui se stabilise a partir de caracteres aleatoires. Tres marque : a reserver a une page unique, et jamais sur une information qu'il faut lire vite.
JS : chaque lettre se fixe apres n tirages, de gauche a droite
1 240installations depuis 2009
4,8note moyenne sur 312 avis
98pour cent de chantiers dans les delais
Compteur qui grimpe
Un chiffre de preuve. La valeur finale est dans le balisage, l'animation ne fait que la rejouer : si le script ne s'execute pas, le chiffre reste juste.
Voir le codeMasquer le code
<div class="an-chiffres" data-an-rejouer>
<div><strong data-an-compte="1240">1 240</strong><span>installations depuis 2009</span></div>
<div><strong data-an-compte="4.8" data-an-dec="1">4,8</strong><span>note moyenne sur 312 avis</span></div>
<div><strong data-an-compte="98">98</strong><span>pour cent de chantiers dans les delais</span></div>
</div>