«
»

Le CSS évolue. Une des principales innovations dans ce standard est l’ajout des animations. En voici un aperçu.

Démo : opacité et rotation

Un peu de code

Principe de fonctionnement

Le principe des animations est simple :

  1. Vous ajouter des styles à vos objets : style normal, et style modifié sur un évènement, par exemple avec :hover. Par exemple, on définit opacity: 0.5; dans le cas normal et opacity: 1; dans le :hover.
  2. On rajoute un style normal qui s’intitule -webkit-transition et dans lequel on va programmer la transition : type de propriété à animer, courbe de vitesse. Par exemple, si on veut animer l’opacité avec une vitesse rapide, en rendant l’arrêt plus fluide : -webkit-transition: -webkit-transform 1000ms ease-out 40ms ;

Source de l’exemple

  1. <style>
  2. .p416_animated {
  3.    opacity:.5;
  4.   -webkit-transition: -webkit-transform 1000ms ease-out 40ms, opacity 1000ms ease-out 40ms;
  5.   -moz-transition: -moz-transform 1000ms ease-out 40ms, opacity 1000ms ease-out 40ms;
  6. }
  7. .p416_animated:hover {
  8.   opacity:1;
  9.   -webkit-transform: rotate(360deg);
  10.   -moz-transform: rotate(360deg);
  11. }
  12. </style>
  13.  
  14. <img decoding="async" class="p416_animated" src="http://blog.cyril.me/wp-content/uploads/2010/09/firefox-150x150.png" alt="" />

Compatibilité

Le grand problème des évolutions de langage, c’est qu’il faut attendre l’évolution des navigateurs. Parmi les navigateurs compatibles disponibles à ce jour, nous avons Firefox 4, Chrome et Safari.

Cependant, le manque de compatibilité, dans certains cas (opacité par exemple), ne rendra pas votre site incompatible, mais seulement moins fini.

Pour aller plus loin : la référence du w3 sur les transitions CSS3.

This entry was posted by Cyril on 7 septembre 2010 at 08:14 under web. Tagged , , , , , . Both comments and pings are currently closed.