Custom Bezier Transition
Deux animations CSS synchronisées : couleur du lien et soulignement glissant de gauche s'activent sur le même cubic-bezier pour un survol cohérent.
Vous aurez accès à la démo interactive avec un compte gratuit.
Cet effet fait partie d'Effect.Labs — 811 effets vanilla, une partie gratuite, une partie premium. Navigation comprend 36 effets, dont 4 gratuits. Découvrir la catégorie →
3 exemples d'usage
Comment ça marche
L'effet repose sur un pseudo-élément ::after positionné en absolu au bas du lien. Au repos, il est réduit à zéro avec transform: scaleX(0) et ancré à droite (transform-origin: right center). Au survol, il passe à scaleX(1) et son origine bascule sur left center — ce changement d'ancrage crée le glissement de gauche à droite à l'entrée, puis de droite à gauche à la sortie, tout en CSS.
La couleur du lien transite simultanément de --text-secondary (#a1a1aa, zinc-400) vers #6366f1 (indigo-500). Les deux transitions partagent la même durée (0,4 s) et la même fonction d'accélération cubic-bezier(.44, 0, .56, 1) : cette courbe est plus symétrique qu'un ease-in-out standard, avec un pic de vitesse au centre et un ralentissement doux aux extrémités, ce qui donne l'impression que le trait « cherche » sa position finale.
Aucun JavaScript n'est impliqué — l'effet est purement déclaratif. La classe .link-color-bezier peut être appliquée à n'importe quel élément de texte inline (<a>, <span>, <button>) sans modifier le DOM ni initialiser de script. L'espacement entre liens repose sur la variable CSS --space-8 (2 rem par défaut).
Accessibilité
- prefers-reduced-motion : absent du code. Les transitions CSS s'exécutent toujours, même si l'OS signale une préférence pour réduire le mouvement. Pour y remédier, ajoutez
@media (prefers-reduced-motion: reduce) { .link-color-bezier, .link-color-bezier::after { transition: none; } }. - Contraste au repos :
#a1a1aasur fond sombre (#0a0a0f) ≈ 8,5:1 — dépasse WCAG AAA. - Contraste au survol :
#6366f1sur#0a0a0f≈ 4,7:1 — respecte WCAG AA pour le texte normal. - L'indication de survol combine deux indices visuels simultanés (changement de couleur + soulignement) : les utilisateurs daltoniens ne dépendent pas uniquement de la teinte pour percevoir l'état actif.
- Les
<span>du démo ne sont pas focusables au clavier par défaut. En production, utiliser<a>ou ajoutertabindex="0"etrole="link"pour une navigation clavier correcte.
Compatibilité navigateur
Nécessite les transitions CSS et les propriétés personnalisées CSS — supportés dans tous les navigateurs modernes depuis 2017. Zéro dépendance externe.
Sans support des transitions CSS, les liens s'affichent sans animation — le changement de couleur et l'apparition du soulignement restent fonctionnels mais instantanés.
Le code
Structure HTML à coller dans votre page (CSS + JS disponibles avec un compte premium) :
<nav class="nav-demo">
<span class="link-color-bezier">Accueil</span>
<span class="link-color-bezier">Services</span>
<span class="link-color-bezier">Projets</span>
<span class="link-color-bezier">Contact</span>
</nav>HTML + CSS + JS complet, prêt à coller — avec des centaines d'effets premium.
Personnaliser
Options passées à l'API ou attributs data-* :
| Option / propriété | Défaut | Effet |
|---|---|---|
| --text-secondary | #a1a1aa | Couleur du lien au repos (zinc-400). Remplacez par la couleur secondaire de votre palette — #94a3b8 pour du slate, #d1d5db sur fond clair. |
| --space-8 | 2rem | Écart horizontal entre les liens du conteneur .nav-demo. Augmentez à 2,5–3 rem pour une nav aérée, réduisez à 1 rem pour une nav compacte. |
| Couleur d'accent (#6366f1) | #6366f1 | Valeur dupliquée dans .link-color-bezier:hover { color } et .link-color-bezier::after { background } — modifiez les deux à l'identique pour votre couleur brand. |
| Durée (0.4s) | 0.4s | Durée dans les deux propriétés transition (couleur et transform). 0,25 s = réactif/tech, 0,6 s = doux/premium. Modifiez la valeur identique dans .link-color-bezier et .link-color-bezier::after. |
| Courbe cubic-bezier(.44, 0, .56, 1) | cubic-bezier(.44, 0, .56, 1) | Fonction d'accélération partagée par la couleur et le trait. Remplacez par ease-out pour un effet plus vif, linear pour un mouvement mécanique, ou cubic-bezier(.65, 0, .35, 1) pour une accentuation plus marquée. |
| Épaisseur du soulignement (2px) | 2px | Propriété height du .link-color-bezier::after. 1 px = ligne éditoriale fine, 3-4 px = accentuation brand plus affirmée. |
| Direction du glissement (transform-origin) | right center / left center | Inversez les deux valeurs — mettez left center au repos et right center au survol — pour un glissement de droite à gauche (adapté aux interfaces RTL). |
FAQ
.link-color-bezier directement sur votre <a> et retirez le text-decoration: none natif du navigateur pour éviter un double soulignement. L'effet fonctionne sur tout élément inline positionné en position: relative.ease-in-out (cubic-bezier(.42, 0, .58, 1)) démarre légèrement plus tôt et termine plus tard — la courbe .44, 0, .56, 1 est plus symétrique et produit un pic de vitesse au milieu plus prononcé, ce qui donne l'impression que l'underline « claque » en place avec plus de caractère. La différence est subtile mais perceptible sur du texte court.link-color-bezier sur vos composants de lien. Aucun cycle de vie, aucun useEffect, aucun listener à nettoyer.
