Niveau : Expert

Transitions CSS3

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 4+, Internet Explorer 10 et Opera 10.6+)

Tutoriel par (Software engineer and UX Designer, Louvain-la-Neuve)
Créé le , mis à jour le (342492 lectures)
Tags : css, css3, transitions, animations, transform

Sommaire


Introduction aux transitions CSS 3

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/css3-transitions/.

Remarque :
Les moteurs récents implémentent la spécification. Sur certaines des anciennes versions, tous les mots-clés spécifiques sont préfixés, c'est-à-dire de -webkit- sous WebKit (Chrome, Safari), de -moz- chez Gecko (Mozilla), -ms- pour Microsoft, et -o- pour Opera. La propriété transition-property devient donc par exemple -webkit-transition-property. Par souci de clarté, l'article se passe de ces préfixes. Les exemples construits utilisent naturellement ces préfixes pour fonctionner. Consultez ce tableau de prise en charge pour en savoir plus.

Principe de base

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é :

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