La version de développement du futur Firefox 3.7 implémente depuis quelques jours les transitions CSS. Vous avez peut être pu le voir, en lisant Paul qui a parlé discrètement sur son blog, en même temps que la nouvelle implémentation de l'API de l'accéléromètre. Vous pouvez voir une démo de Paul avec les transitions CSS.

Le principe est assez simple:

  • avec la propriété transition-property, vous indiquez les propriétés CSS qui seront concernées par la transition, c'est à dire, quand leur valeur changera, il y aura une transition entre l'ancienne valeur vers la nouvelle valeur, le changement ne sera donc pas immédiat.
  • transition-duration permet d'indiquer la durée de la transition, pour chacune des propriétés
  • transition-timing-function, indique la fonction de transition, c'est à dire la manière dont la transition sera faite. Par exemple la fonction ease-in-out fait une transition rapide au début, lente au "milieu", et rapide à la fin. On a ainsi des fonctions pour faire des effets élastiques, smooth etc..
  • transition-delay pour indiquer à partir de combien de temps la transition doit être faite, à partir du moment où la valeur est changée.
  • transition pour indiquer tout ça en une seule instruction.

Voir la spécification complète sur le site du W3C (spécification qui est encore un brouillon).

Un exemple :

  .mydiv {
     width: 100px;
     transition: width 1s linear;
  }

 .mydiv:hover {
    width:200px;
 }

Quand on passera la souris au dessus de l'élément, sa largeur changera à 200px. Avec la propriété transition, ce changement ne sera pas immédiat. La largeur passera de 100px à 200px en 1 seconde, de manière linéaire. Bien sûr, ce changement de valeur peut être fait via javascript plutôt que sur un :hover, par exemple: document.querySelector(".mydiv").style.width="200px";.

Le gros intérêt de ces propriétés CSS, c'est que ça va rendre obsolète beaucoup de fonctions d'animations que l'on retrouve dans beaucoup de frameworks javascript (jquery, mootools...). Ça permettra des pages plus légères (les frameworks seront moins lourds à terme) et plus rapide.

C'est donc implémenté dans webkit (donc dans Safari, et Chrome je crois), et dans une future version de Firefox, en utilisant bien entendu les prefixes -webkit- et -moz- sur les propriétés pour que ça fonctionne.

Et, comme je l'avais déjà dis il y a quelques mois dans un billet sur notre technologie à Zoomorama, c'est aussi implémenté dans notre browser (développé en actionscript 3). J'ai mis en ligne deux démos faites par David Marteau, et c'est utilisable dés maintenant dans vos fichiers ZML :-)