15 micro-interactions CSS sans une ligne de JavaScript (ce qui exigeait une lib hier)

Le détail invisible qui ne demande plus de JavaScript

Les micro-interactions sont ce qui sépare une interface fonctionnelle d'une interface mémorable : un bouton qui répond au survol, un soulignement qui glisse, un élément qui s'illumine au focus. Elles ne sont pas décoratives — elles donnent le feedback qui guide l'utilisateur et signale ce qui est interactif. Ce qui a changé, et c'est tout le sujet de 2026, c'est qu'on les code désormais sans JavaScript. Les effets pour lesquels j'importais une bibliothèque d'animation il y a deux ans tiennent aujourd'hui en quelques lignes de CSS, et tournent à 60 images par seconde sans toucher au thread principal.

Je présente ici quinze effets que j'utilise régulièrement, regroupés en trois familles. L'objectif n'est pas de les copier tels quels, mais de comprendre les mécanismes pour fabriquer tes propres variations.

Cinq effets de texte et de soulignement

Mon préféré reste le soulignement animé via pseudo-élément : un trait qui s'étend sous le mot grâce à une transition de transform: scaleX, avec l'origine à gauche pour que l'animation parte du début.

.link {
  position: relative;
}
.link::after {
  content: "";
  position: absolute;
  left: 0; bottom: -2px;
  width: 100%; height: 2px;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .25s ease;
}
.link:hover::after { transform: scaleX(1); }

Les quatre autres suivent la même philosophie : un split text color où un pseudo-élément avec clip-path révèle une seconde couleur de gauche à droite ; une animation de graisse via police variable, où la règle @property rend font-variation-settings interpolable pour passer de 400 à 700 sans saut ; un shimmer combinant background-clip: text et une animation de background-position ; et un effet d'élévation où le texte monte de quelques pixels en translateY pendant qu'une ombre douce apparaît. Tous reposent sur transform, opacity et color — donc gratuits côté performance.

Cinq effets sur les boutons et les cartes

Le bouton à balayage est un classique indémodable : un pseudo-élément qui s'étend de 0 à 100 % de la surface en scaleX au survol. Le gradient border rotation utilise un conic-gradient animé via @property pour une bordure dont le dégradé tourne en continu. Le card tilt en perspective 3D est le plus impactant : une perspective sur le parent, un rotateX/rotateY subtil sur la carte, un scale(1.02) et une box-shadow qui s'intensifie pour donner une matérialité physique. J'ajoute le glassmorphism intensify — backdrop-filter: blur() qui passe de 8 à 16 pixels au hover — mais avec parcimonie : il n'a de sens que sur un fond riche en contenu, et tombe à plat sur un aplat uni. Le cinquième joue sur une ombre portée qui se déploie pour suggérer l'élévation.

Cinq effets avec les nouvelles spécifications CSS

C'est ici que 2026 fait la différence. Le clip-path morph déforme une forme au survol en animant les coordonnées d'un polygon() — à condition de garder le même nombre de points dans les deux états. Le staggered child animation décale l'animation de chaque enfant selon son index, déclenché par le parent grâce au sélecteur

Mais le vrai cadeau, c'est l'entrée animée sans bricolage. La règle @starting-style couplée à transition-behavior: allow-discrete est passée Baseline avec Firefox 129 — elle permet enfin d'animer un élément qui apparaît depuis display: none, ce qui exigeait du JavaScript hier.

.toast {
  opacity: 1;
  transition: opacity .3s, display .3s allow-discrete;
}
@starting-style {
  .toast { opacity: 0; }
}

Reste un mur qui vient tout juste de tomber : animer vers height: auto. Les propriétés interpolate-size et la fonction calc-size() le rendent possible — un accordéon qui s'ouvre en douceur sans connaître sa hauteur à l'avance. Attention toutefois : ce n'est pas encore Baseline, donc je l'utilise en amélioration progressive avec un repli, jamais comme socle.

Performance et accessibilité : les deux règles non négociables

La performance des animations CSS tient à une règle unique : ne jamais animer une propriété qui déclenche un recalcul de layout. transform, opacity et filter sont composées par le GPU et s'exécutent à 60 images par seconde sans bloquer le thread principal ; animer width, height, top, left, padding ou margin provoque des reflows coûteux. will-change prépare le navigateur mais consomme de la mémoire GPU — à utiliser avec parcimonie, et à retirer après l'animation.

Deux mots sur l'horizon proche. Les scroll-driven animations lient une animation au défilement via scroll() et view() ; elles tournent dans Chrome et Edge depuis la 115 et dans Safari 26, mais restent derrière un flag dans Firefox — c'est précisément un des chantiers d'Interop 2026, l'effort commun des trois moteurs pour aligner leur support. Le CSS Anchor Positioning, lui, est déjà livré dans Safari et Chrome (Firefox en cours) : tooltips, popovers et menus contextuels se positionnent et s'animent en CSS pur, sans calcul JavaScript de position. La leçon de fond ne change pas : le CSS moderne a atteint le point où la majorité des micro-interactions se passent de JavaScript, ce qui allège le code, améliore les performances et simplifie la maintenance. Les meilleures sont celles que l'utilisateur ressent sans pouvoir les nommer. Moins, c'est plus : vise la subtilité, pas le spectacle.