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 CSS Transitions il est désormais possible de réaliser des transitions basiques à l'aide de CSS.
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.
Principe de base des transitions
Le principe de base d'une transition CSS3 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.
Quelques exemples de transitions simples en CSS 3
| 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 |