Niveau : 
Transitions CSS3
Introduction aux transitions CSS 3
Beaucoup d'intégrateurs en ont rêvé : animer les pages web uniquement à l'aide de styles CSS, sans apport de JavaScript. Grâce aux dernières évolutions du langage et au module CSS3 Transitions, il est désormais possible de réaliser des transitions basiques à l'aide de CSS dans les navigateurs récents (Safari 4+, Chrome 2+, Firefox 3.6+)... et demain dans Internet Explorer ou Opera ?
Tutoriel par Antoine Cailliau (Software engineer and UX Designer, Louvain-la-Neuve)
Sommaire
Introduction et compatibilité
La spécification est le document qui définit de manière claire, précise et univoque le langage. Les spécifications des CSS 3 sont découpées en modules. Le module qui nous intéresse est nommé CSS Transition Module.
La spécification relative au module est disponible à l'adresse
suivante :
http://www.w3.org/TR/2009/WD-css3-transitions-20090320/.
Les indications suivantes sont basées sur ce document ainsi
que sur l'implémentation Webkit. Le moteur de rendu Webkit est
utilisé notamment dans Safari et Google Chrome.
Remarque : Utilisation concrète
Le moteur de rendu Webkit (Chrome, Safari) implémente la spécification
mais tous les mots-clés spécifiques sont préfixés de
-webkit- ; La propriété
transition-property devient donc
-webkit-transition-property.
Chez Mozilla Firefox, ce préfixe devient -moz- et chez Opera, il conviendra d'employer -o-.
Par souci de clarté, l'article se passe de ces préfixes. Les exemples construits utilisent naturellement ces
préfixes pour fonctionner.
Au moment de la rédaction de ce document, les exemples sont fonctionnels uniquement dans Safari ou Chrome et dans la version 3.6 de Firefox.
Principe de base
Le principe de base d'une transition CSS 3 est de permettre une transition douce entre l'ancienne valeur et la nouvelle valeur d'une propriété CSS lorsqu'un événement est déclenché :
- soit via une pseudo-classe telles que
:hover,:focusou:active - soit via JavaScript
Précédemment, ce genre de comportement n'était possible qu'avec l'usage de JavaScript. Ce nouveau module CSS3 permet dorénavant de s'en affranchir au profit exclusif des feuilles de style.
Pour définir une nouvelle transition animée, il est nécessaire de préciser au minimum :
- La ou les propriété(s) à animer
- La durée de l'animation
Exemples concrets
Entrons directement dans le vif du sujet à travers une petite liste d'exemples des possibilités (non exhaustives) offertes par le module de transition CSS3.
Les premiers exemples sont particulièrement faciles à décortiquer et à comprendre. Affichez le code source de chacune des pages pour visualiser la méthode employée.
| Page d'exemple | Explication |
|---|---|
| Couleur de Texte | Modifie la couleur de texte d'un lien au survol |
| Couleur de fond | Modifie la couleur de fond d'un paragraphe au survol |
| Déplacement de texte | Décale un lien au survol en jouant sur la valeur padding-left |
| Dimensionnement d'éléments | Augmente la hauteur et largeur d'images au survol |
| Menu animé | Effets de transitions sur un menu simple |
| Menu graphique animé | Affichage et masquage à l'aide de transitions |
| Infobulles | Apparition d'infobulles explicatives sur des images |
