Transitions CSS3

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

• soit via une pseudo-classe telles que :hover, :focus ou :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.