Qu’est-ce qu’une micro-interaction et pourquoi elle améliore l’UX
Une micro-interaction est une petite animation qui répond à une action de l’utilisateur : un bouton qui change de couleur au survol, un formulaire qui secoue quand le mot de passe est incorrect, un cœur qui pulse quand on « like » un post. Ces détails semblent insignifiants mais ils transforment un site statique en expérience vivante et intuitive.
Les micro-interactions servent 4 objectifs concrets :
- Feedback visuel : confirmer qu’une action a été prise en compte (bouton cliqué, formulaire envoyé)
- Guidage : attirer l’attention vers un élément important (badge de notification, appel à l’action)
- État du système : montrer qu’un processus est en cours (loading spinner, barre de progression)
- Émotion : créer un sentiment de plaisir et de qualité (animation de succès, confetti)
Les transitions CSS : la base de toute micro-interaction
La propriété transition CSS anime le passage d’un état à un autre. C’est le fondement de 80 % des micro-interactions web.
Syntaxe de base
/* Syntaxe complète */
.element {
transition: propriété durée timing-function délai;
}
/* Exemple concret : un bouton qui change de couleur en 0.3s */
.btn {
background-color: #2563eb;
color: white;
padding: 12px 24px;
border: none;
border-radius: 8px;
cursor: pointer;
transition: background-color 0.3s ease, transform 0.2s ease;
}
.btn:hover {
background-color: #1d4ed8;
transform: translateY(-2px);
}
.btn:active {
transform: translateY(0);
}Ce bouton fait deux choses au survol : il s’assombrit et « monte » de 2 pixels. Au clic (:active), il redescend. C’est subtil mais ça donne une sensation tactile, comme un vrai bouton physique.
Les timing functions expliquées
ease: démarre lentement, accélère, puis ralentit à la fin. Le plus naturel pour la plupart des casease-in: démarre lentement, accélère. Bon pour les éléments qui « partent » (slide out)ease-out: démarre vite, ralentit. Bon pour les éléments qui « arrivent » (slide in)ease-in-out: lent au début et à la fin. Pour les mouvements de va-et-vientcubic-bezier(): personnalisé. Utilisez cubic-bezier.com pour créer le vôtre visuellement
Règle de durée : les micro-interactions doivent durer entre 150ms et 500ms. En dessous de 150ms, l’animation est trop rapide pour être perçue. Au-dessus de 500ms, l’interface semble lente.
6 micro-interactions à copier-coller dans vos projets
1. Bouton avec effet de ripple (Material Design)
.btn-ripple {
position: relative;
overflow: hidden;
background: #2563eb;
color: white;
padding: 12px 32px;
border: none;
border-radius: 8px;
cursor: pointer;
font-size: 16px;
}
.btn-ripple::after {
content: '';
position: absolute;
top: 50%;
left: 50%;
width: 0;
height: 0;
background: rgba(255, 255, 255, 0.3);
border-radius: 50%;
transform: translate(-50%, -50%);
transition: width 0.6s ease, height 0.6s ease;
}
.btn-ripple:active::after {
width: 300px;
height: 300px;
}Au clic, un cercle blanc semi-transparent s’étend depuis le centre du bouton — exactement comme l’effet ripple des applications Google.
2. Input de formulaire avec animation de label
.form-group {
position: relative;
margin-bottom: 24px;
}
.form-group input {
width: 100%;
padding: 16px 12px 8px;
border: 2px solid #e5e7eb;
border-radius: 8px;
font-size: 16px;
outline: none;
transition: border-color 0.3s ease;
}
.form-group label {
position: absolute;
left: 12px;
top: 50%;
transform: translateY(-50%);
color: #9ca3af;
font-size: 16px;
pointer-events: none;
transition: all 0.3s ease;
}
.form-group input:focus {
border-color: #2563eb;
}
.form-group input:focus + label,
.form-group input:not(:placeholder-shown) + label {
top: 8px;
font-size: 12px;
color: #2563eb;
transform: translateY(0);
}Le label « flotte » vers le haut quand l’utilisateur clique dans le champ, puis reste en haut si du texte est saisi. Utilisé par Google, Stripe et la plupart des apps modernes.
3. Card avec effet de survol et ombre
.card {
background: white;
border-radius: 12px;
padding: 24px;
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.card:hover {
transform: translateY(-4px);
box-shadow: 0 12px 24px rgba(0, 0, 0, 0.15);
}La carte « lévite » au survol avec une ombre qui s’approfondit. Effet simple mais très efficace pour les grilles de produits, les articles de blog et les portfolios.
4. Loading spinner
@keyframes spin {
to { transform: rotate(360deg); }
}
.spinner {
width: 40px;
height: 40px;
border: 4px solid #e5e7eb;
border-top-color: #2563eb;
border-radius: 50%;
animation: spin 0.8s linear infinite;
}Un cercle qui tourne indéfiniment. Placez-le dans vos formulaires pendant l’envoi ou sur vos pages en cours de chargement.
5. Notification toast qui glisse depuis le haut
@keyframes slideDown {
from {
transform: translateY(-100%);
opacity: 0;
}
to {
transform: translateY(0);
opacity: 1;
}
}
.toast {
position: fixed;
top: 20px;
right: 20px;
background: #059669;
color: white;
padding: 12px 24px;
border-radius: 8px;
font-size: 14px;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
animation: slideDown 0.4s ease forwards;
z-index: 1000;
}
.toast.error {
background: #dc2626;
}Idéal pour confirmer un ajout au panier, un envoi de formulaire ou afficher un message d’erreur.
6. Menu hamburger animé
.hamburger {
width: 30px;
height: 24px;
position: relative;
cursor: pointer;
background: none;
border: none;
}
.hamburger span {
display: block;
position: absolute;
width: 100%;
height: 3px;
background: #1f2937;
border-radius: 2px;
transition: all 0.3s ease;
}
.hamburger span:nth-child(1) { top: 0; }
.hamburger span:nth-child(2) { top: 10px; }
.hamburger span:nth-child(3) { top: 20px; }
/* Quand le menu est ouvert */
.hamburger.active span:nth-child(1) {
top: 10px;
transform: rotate(45deg);
}
.hamburger.active span:nth-child(2) {
opacity: 0;
}
.hamburger.active span:nth-child(3) {
top: 10px;
transform: rotate(-45deg);
}Les trois barres se transforment en croix (X) quand le menu s’ouvre. Il faut un peu de JavaScript pour toggler la classe .active :
document.querySelector('.hamburger').addEventListener('click', function() {
this.classList.toggle('active');
});Les keyframes CSS : créer des animations complexes
La règle @keyframes permet de définir des animations avec plusieurs étapes, contrairement à transition qui ne gère que deux états (avant/après).
/* Animation de "bounce" pour attirer l'attention */
@keyframes bounce {
0%, 100% { transform: translateY(0); }
25% { transform: translateY(-10px); }
50% { transform: translateY(0); }
75% { transform: translateY(-5px); }
}
.badge-notification {
animation: bounce 1s ease 3; /* 3 répétitions */
}
/* Animation de pulsation pour un bouton CTA */
@keyframes pulse {
0%, 100% { box-shadow: 0 0 0 0 rgba(37, 99, 235, 0.4); }
50% { box-shadow: 0 0 0 15px rgba(37, 99, 235, 0); }
}
.cta-button {
animation: pulse 2s ease-in-out infinite;
}Performance : les règles pour des animations fluides à 60 FPS
Les animations CSS peuvent rendre votre site lent si elles sont mal implémentées, surtout sur les smartphones d’entrée de gamme très courants en Afrique de l’Ouest.
Les propriétés « sûres » à animer
Seules 2 propriétés CSS sont animées par le GPU (donc fluides) :
transform: translateX/Y, scale, rotateopacity: transparence de 0 à 1
Toutes les autres propriétés (width, height, margin, padding, top, left, background-color, border) déclenchent un recalcul du layout ou un repaint, ce qui provoque des saccades sur les appareils peu puissants.
Exemples de bonnes vs mauvaises pratiques
/* ❌ MAUVAIS : animer width provoque un layout recalc */
.element {
width: 100px;
transition: width 0.3s ease;
}
.element:hover {
width: 120px;
}
/* ✅ BON : utiliser scale à la place */
.element {
transform: scale(1);
transition: transform 0.3s ease;
}
.element:hover {
transform: scale(1.2);
}
/* ❌ MAUVAIS : animer top/left */
.element {
position: absolute;
top: 0;
transition: top 0.3s ease;
}
.element.moved {
top: 100px;
}
/* ✅ BON : utiliser translateY */
.element {
transition: transform 0.3s ease;
}
.element.moved {
transform: translateY(100px);
}Respecter le prefers-reduced-motion
Certains utilisateurs ont des sensibilités aux animations (troubles vestibulaires, épilepsie). Respectez leur choix :
@media (prefers-reduced-motion: reduce) {
* {
animation-duration: 0.01ms !important;
transition-duration: 0.01ms !important;
}
}Cette media query désactive toutes les animations pour les utilisateurs qui ont activé « Réduire les animations » dans les paramètres de leur système.
Outil recommandé : Animate.css
Si vous voulez des animations prêtes à l’emploi sans tout coder, Animate.css (animate.style) est une bibliothèque de 80+ animations CSS. Installez-la via CDN et ajoutez des classes à vos éléments :
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css">
<h1 class="animate__animated animate__fadeInDown">Bienvenue</h1>
<button class="animate__animated animate__pulse animate__infinite">Acheter</button>Poids : seulement 10 Ko compressé. Compatible avec tous les navigateurs modernes.
