Transitions CSS3 : une introduction [2/2]

18.03.2013

Reprenons

Revoilà notre exemple, son CSS et la propriété transition :

Bouh !

 /* L'encadré Bouh ! au repos */ .bouh {margin: 0 auto;width: 4em; padding: 0; text-align: center; color: black; background-color: white; border: 1px solid black; transition:all linear 3s} /* L'encadré Bouh ! au survol */ .bouh:hover {padding: 2em; font-size: 2em; font-family: monospace; color: white; background-color: black; border: 5px dashed orange;}

Détaillons

Avant de tripoter plus avant le CSS, il faut d'abord savoir que transition est une propriété "condensée", une propriété qui en rassemble plusieurs autres, tout à fait comme backround regroupe background-color, background-image, background-repeat et d'autres. Voici les propriétés élémentaires qui caractérisent une transition :

transition-property: la ou les propriétés CSS soumises à transition, liste de noms de propriétés séparés par des virgules. Dans notre exemple : all.
transition-duration: la durée de la transition. Il peut y avoir plusieurs durées s'il y a plusieurs noms de propriétés dans transition-property. Dans notre exemple : 3s (ne pas oublier d'écrire le s !). Par défaut 0s, autrement dit changement immédiat.
transition-timing-function: la loi de transition utilisée. Il peut y avoir plusieurs fonctions s'il y a plusieurs noms de propriétés dans transition-property. Dans notre exemple : linear. Par défaut ease : début rapide et fin en douceur. Pour plus de détails voyez les liens en fin d'article.
transition-delay: le temps à laisser écouler avant le début de la transition. Il peut y avoir plusieurs fonctions s'il y a plusieurs noms de propriétés dans transition-property. Dans notre exemple : la valeur par défaut qui est 0s.

Réécrivons donc la propriété condensée, en ne nous faisant pas piéger : certaines propriétés, comme font-family, ne sont pas animables et sont donc inutiles à mentionner, d'autres, comme padding et border, sont des propriétés condensées qu'il faudra développer. En définitive, pour obtenir le même résultat, on écrira par exemple :

 transition-property : font-size , padding-top, padding-right, padding-bottom, padding-left , color , background-color , border-width , border-color ; transition-duration:3s ; transition-timing-function:linear; transition-delay : 0;

Bien sûr c'est plus verbeux ! Mais ça permet de raffiner, vous allez voir.

Raffinons

De mon cerveau malade surgit l'idée d'une transition progressive, propriété après propriété. Pourquoi pas ? En détail :

d'abord la taille des caractères, qui provoquera une croissance d'ensemble du "Bouh !",
ensuite les paddings horizontaux,
puis les paddings verticaux,
enfin les couleurs et la bordure.

Pour ne pas y passer des heures je réduirai la durée de chaque étape à deux secondes. Pour organiser la succession des étapes je jouerai sur transition-duration. Voilà le résultat :

Bouh !

 transition-property : font-size , padding-top, padding-right , padding-bottom, padding-left , color , background-color , border-width , border-color ; transition-delay : 0s /* font-size */ ,4s,2s,4s,2s /* padding */ ,6s /* color */ ,6s /* background-color */ ,6s /* border-width */ ,6s /* border-color */ ; transition-duration:2s; /* même durée pour chaque propriété */ transition-timing-function:linear ; /* même loi pour chaque propriété */

Ce n'est qu'un exemple, assez pathologique, vous saurez sûrement en trouver de pires !

Notez que la liste des durées doit correspondre terme à terme à celle des propriétés – c'est bien pourquoi j'ai commenté chaque durée et je vous invite à en faire autant pour ne pas vous perdre ! Que se passe-t-il si les deux listes n'ont pas le même nombre de termes ? Je vous renvoie une fois de plus aux liens en fin d'article.

Une question

Pourquoi ne faut-il pas mettre la transition dans la règle en :hover ? En réalité on peut, mais il faut comprendre ce que l'on fait. Oublions l'exemple précédent et revenons à du très simple :

 a {text-decoration:underline} /* les liens sont soulignés */ a:hover {font-style:italic} /* un lien survolé est en italique */

Un lien au repos obéit à la première règle et à elle seulement : il est souligné. Un lien survolé obéit à la deuxième règle et aussi à la première : il est en italique et souligné. Tout ça est trivial, je pense.

Que décrit la propriété transition ? Le rythme auquel se modifie l'aspect d'un élément quand cet aspect doit changer.

Si transition se trouve dans la première règle, elle décrit donc le rythme auquel change l'aspect d'un lien, qu'il soit survolé ou non. Le passage de "repos" à "survol" (ou autre chose) sera progressif, celui de "survol" à "repos" (ou autre chose) aussi.

Si transition se trouve dans la deuxième règle, elle ne décrit que le rythme auquel change l'aspect d'un lien survolé – et seulement d'un lien survolé. Autrement dit, vous ne verrez quelque chose que lorsque vous cesserez de survoler le lien, lorsque vous passerez de "survol" à "repos" (ou autre chose) – le passage de "repos" à "survol", lui, restera instantané.

En première approche, mettre transition dans une règle en :hover est donc une erreur de débutant (que j'ai commise !).

En deuxième approche, mettre transition dans une règle en :hover peut être une profonde subtilité, lorsqu'on veut que le retour de "survol" à "repos" obéisse à une loi différente de celle du trajet aller. Bien sûr, ne jouez pas à ça tout de suite…

Bonnes lectures

Revoici les deux liens donnés dans l'article précédent :

CSS 3 files (en anglais), pour une initiation plus complète.
La spécification du W3C pour tout savoir.