Récemment, j’ai vu passer certains trucs dans mon Twitter concernant les transitions en CSS3. Le premier exemple que j’avais vu ne m’avait guère impressionné, mais je m’y suis un peu plus intéressé et voilà que je trouve cela beaucoup plus convainquant.
Compatibilité
Pour l’instant, les transitions en CSS3 sont compatibles sur Safari 4 et Chrome 3.
Les propriétés à connaitre
transition-property : détermine sur quelle propriété CSS nous voulons que la transition soit appliquée (ex : background, color, etc)
transition-duration : détermine la durée de la transition
transition-timing-function : détermine l’accélération/décélération de la transition
transition-delay : détermine le délai avant que la transition s’effectue
Raccourci/Shorthand
selecteur  {
transition: opacity 2s ease-in;
}
Voici deux exemples sur les transitions CSS :
Vous pouvez télécharger ci-dessous les deux exemples que j’ai faits avec les transitions.
Télécharger le premier exemple sur les transitions CSS.
Télécharger le deuxième exemple sur les transitions CSS.
Que va amener les transitions CSS ? Ces nouvelles possibilités vont nous amener à délaisser encore une fois Flash. Je dis encore une fois, puisqu’HTML5 nous amène déjà à le délaisser. Nous n’avons qu’à penser à la balise <video> entre autre. Il ne sera plus nécessaire d’avoir recours à Flash et d’absolument utiliser Javascript pour ajouter plus d’interactivité dans nos sites Web. Les transitions CSS « vont faire la job » pour créer des animations de base.
Avec toutes ces nouvelles possibilités, il n’y aura plus d’excuse pour abuser de Flash dans nos sites Web…
Voici un excellent site Web pour voir différents exemples sur les transitions en CSS3 :
http://www.alsacreations.com/tuto/lire/873-transitions-css3-animations.html
Pour en savoir davantage sur les transitions en CSS3, je vous invite également à lire la spec du W3C.
