CSS : Une transition de couleur sur un lien

visuel transition-couleurLe but de cet article est de modifier la couleur d’un lien petit à petit en utilisant uniquement du code CSS. Si votre navigateur supporte la propriété transition, vous pouvez observer le résultat sur le logo « Bellami » par exemple.

Un premier constat : une des techniques employées couramment sur le hover d’un lien est le changement de couleur.
Un deuxième : aujourd’hui, presque tous les navigateurs dits modernes savent gérer la propriété transition. Bizarrement, seul IE9 manque à l’appel… En tous cas, selon les dires récents de Microsoft lors du MIX11, IE10 supportera la propriété transition.

Appliquons donc une transition sur la couleur du lien :
a {color:#000;//par défaut les liens sont de couleur noires
-webkit-transition:color 250ms ease-out; //transition webkit
-moz-transition:color 250ms ease-out; //transition mozilla
-o-transition:color 250ms ease-out; //transition opera
transition:color 250ms ease-out; //syntaxe d'avenir
}

Rien ne se passe ? c’est normal. Nous venons d’indiquer que si la couleur de la balise a était modifiée, alors cette couleur changerait en 250ms au total, en suivant la fonction de temps ease-out. Autrement dit, avec cet ajout de transition, dès que la couleur d’un lien est modifié, que ce soit en mode :hover, :active, par l’ajout d’une classe via JS, … alors votre lien verra sa couleur changer petit à petit.
Pour le voir fonctionner, il faut modifier la couleur du lien sur un autre état, prenons comme exemple le hover, ce qui nous donne le code suivant :
a:hover {color:#ccc;//les liens survolés sont de couleur grises}

Pour la durée, j’aime bien le 250ms pour tous les effets graphiques « secondaires », c’est assez long pour voir l’effet, assez court pour ne pas avoir à attendre que ce soit fini avant de cliquer (oui, la plupart de vos internautes sont bêtes et méchants). J’entends par « secondaire » tout ce qui n’est pas vital au bon fonctionnement de la page et du design.

Et pour Internet Explorer alors ?
Comme souvent dans ce blog, je répondrai de la même manière : si l’effet n’est pas primordial au sein de votre page/site, alors laissons IE de côté, c’est à lui de s’adapter à la norme, pas à vous de vous adapter à lui. De plus, l’effet étant secondaire, ce n’est pas une grande perte pour les internautes sous IE ; mais un gain appréciable pour les autres. Si je ne dis pas trop de bêtises, il s’agit là d’un bon exemple de dégradation harmonieuse.

Vous pouvez aussi généraliser cet effet à toutes vos balises, afin que dès qu’un élément change de couleur, il le fera petit à petit :
a, div, span, p, h1, h2, h3, h4, h5, h6, blockquote, pre, abbr, acronym, address, big, cite, code, del, dfn, em, ins, small, strike, strong, sub, sup, b, u, i, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td {
-webkit-transition:color 250ms ease-out; //transition webkit
-moz-transition:color 250ms ease-out; //transition mozilla
-o-transition:color 250ms ease-out; //transition opera
transition:color 250ms ease-out; //syntaxe d'avenir
}

N’utilisez pas le sélecteur * qui est contre-performant en termes d’optimisation de votre site, préférez déclarer vos balises une à une.

Pour conclure, je vous invite grandement à tester cette propriété transition, et de l’étendre à d’autres idées. Car, en se basant sur le même principe, on peut imaginer faire varier l’opacité de tout un bloc afin de le faire apparaître ou disparaître petit à petit, faire des sliders en faisant varier la hauteur ou la largeur d’un bloc (sans code JS autre qu’un changement de classes), faire varier la couleur d’un background,…

Pour plus d’informations sur les transitions, je vous invite à lire la documentation officielle du W3C : http://www.w3.org/TR/css3-transitions/.
Pour plus d’informations sur les fonctions de temps disponible pour les transitions, je vous invite à lire l’article et utiliser la démo présente sur : http://www.the-art-of-web.com/css/timing-function/.

Cette entrée a été publiée dans CSS, avec comme mot(s)-clef(s) , , , . Vous pouvez la mettre en favoris avec ce permalien.

4 commentaires pour CSS : Une transition de couleur sur un lien

  1. Bellami

    Précisons également qu’une des anciennes manières de faire, qui a l’avantage d’être compatible IE9 et ses versions inférieures est décrite ici : http://cssglobe.developpez.com/tutoriels/javascript/frameworks/jquery/effet-transition-couleur/

    Son énorme désavantage est qu’il s’agit d’une « bricole » via jQuery, ce qui vous obligera a inclure jQuery dans vos page (environ 29ko) ainsi qu’une fonction JS de transition pesant 1.5 Ko.

    La solution CSS3 pèse 183 octets, soit près de 840% de poids en moins par rapport à la fonction JS de transition (donc sans compter le poids de jQuery), et ceci pour le même résultat visuel!

    • Retour de commentaire ! ;)
      Petite précision : une taille de code supérieure ne veut pas dire moins de performance pour une page web. En l’occurrence, pour sa propriété animation, CSS3 sur la plupart des navigateurs modernes, pompe pas mal le CPU ( 2 x plus que la solution JS selon les tests).

      Donc on va perdre 0.15 secondes à charger la solution JS pour avoir un rendu identique sur un maximum de configuration, tout en sollicitant jusqu’à 2 fois moins le CPU, ou bien on gagne 0.15 secondes au chargement de la page.

  2. Merci Enguerran Weiss ;)

    CSS3 deux fois plus que la solution JS ?
    Cela m’étonne grandement car j’imagine qu’ils utilisent la même technique dans le fond. As-tu des liens qui présentent ces études ? Ce serait cool.

    De plus, il faut aussi penser à la maintenance du code, et à la maintenance de la performance car les transitions CSS sont gérées en natif par le navigateur, ce qui laisse supposer de nombreuses évolutions au fur et à mesure des mises à jours des navigateurs.

    Quoi qu’il en soit ce petit débat montre bien qu’en terme de performance web, il faut toujours tout tester et envisager toutes les solutions possibles avant de foncer tête baissée.

  3. yanik

    Bon ben 1,5 an après Enguerran n’a toujours pas trouvé la source de ce qu’il avance, ça m’aurait bien intéressé moi aussi

Laisser un commentaire

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *

Vous pouvez utiliser ces balises et attributs HTML : <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>