Les transitions en CSS3.

Depuis CSS3, vous avez la possibilité de faire des transitions en CSS3. Cependant, actuellement (03-2013) beaucoup navigateurs ne reconnaissent pas les propriétés de transition sans les avoir au préalable préfixées. Par exemple, rien que pour définir la propriété des éléments à animer, il faut faire quatre déclarations : .ma-transition-css{
  -webkit-transition-property : width; /* -webkit- Chrome et Safari */
  -moz-transition-property : width; /* -moz -Firefox */
  -o-transition-property : width; /* -o- Opera */
  transition-property : width; /* Navigateur aux normes w3c */
}
Une fois que l'on sait cela, le principe est assez simple.

La liste des propriétés css qui acceptent la transition est celle du w3c. Cependant, chaque navigateur accepte d'autres propriétés css.

Vous trouverez plus bas les compatibilités navigateurs concernant les transitions en CSS3.

Déclarer une transition en CSS3.

En Css3, vous devez spécifier quelle propriété Css va subir une transformation lors de son changement de valeur avec la propriété CSS3 . Si vous avez plusieurs propriétés à animer, alors il faut les séparer par une virgule.
Vous pouvez aussi utiliser le mot clé all qui spécifie que toutes les propriétés CSS3 autorisées sont transformables si elles changent de valeur, mais il est préférable pour des raisons de performance de ne spécifier que les propriétés Css qui doivent être transformées..ma-transition-css{
  -webkit-transition-property : width, height; /* -webkit- Chrome et Safari */
  -moz-transition-property : width, height; /* -moz -Firefox */
  -o-transition-property : width, height; /* -o- Opera */
  transition-property : width, height; /* Navigateur aux normes W3C */
}

Paramétrer votre transition en CSS3.

Maintenant que nous avons spécifié en CSS3 les propriétés Css qui doivent être transformées lors d'un changement de leur valeur, il nous reste quelques paramétrages à faire.

Propriété CSS de transition transition-duration

Il nous faut définir la durée de la transformation de chaque propriété transformable. La propriété Css3 va vous permettre spécifier ces durées de transition.
La durée de la transition peut-être exprimée en :
- secondes, le nombre sera suivit par "s", 0s par défaut.
- millisecondes : le nombre sera suivit par "ms".
Si les durées sont identiques, dans ce cas, on ne met qu'une seule valeur. .ma-transition-css{
  /* -*-transition-property : width, height; versions préfixées non reprise pour l'exemple */
  transition-property : width, height;
  -webkit-transition-duration : 5s, 10s; /* -webkit- Chrome et Safari */
  -moz-transition-duration : 5s, 10s; /* -moz -Firefox */
  -o-transition-duration : 5s, 10s; /* -o- Opera */
  transition-duration : 5s, 10s; /* Navigateur aux normes w3c */
  /* 5s pour la transition width et 10s pour la transition height */
}

Propriété CSS de transition transition-delay

Vous pouvez aussi définir un délai latence avant de démarrer la transformation de chaque propriété transformable. La propriété Css3 va vous permettre spécifier ce de temps de pause avant démarrer la transition.
Si aucune de vos transitions n'a de pause, alors vous pouvez omettre cette propriété css de transition.
Si les délais sont identiques, dans ce cas, on ne met qu'une seule valeur.
Cette durée peut-être exprimée en :
- secondes, le nombre sera suivit par "s", 0s par défaut.
- millisecondes : le nombre sera suivit par "ms"..ma-transition-css{
  /* -*-transition-property : width, height; versions préfixées non reprise pour l'exemple */
  transition-property : width, height;
  -webkit-transition-delay : 1s, 2s; /* -webkit- Chrome et Safari */
  -moz-transition-delay : 1s, 2s; /* -moz -Firefox */
  -o-transition-delay : 1s, 2s; /* -o- Opera */
  transition-delay : 1s, 2s; /* Navigateur aux normes w3c */
  /* 1s pour le délai de transition width et 2s pour le délai de transition height */
}

Propriété CSS de transition transition-timing-function

Vous pouvez aussi définir l'effet la transformation de chaque propriété transformable. La propriété Css3 transition-timing-function va vous permettre spécifier la vitesse de la transition au cours de la durée de son exécution.
Pour plus d'informations sur les valeurs possibles je vous laisse allez voir la définition de .
Si les effets sont identiques, dans ce cas, on ne met qu'une seule valeur..ma-transition-css{
  -webkit-transition-timing-function : linear, ease-in-out; /* -webkit- Chrome et Safari */
  -moz-transition-timing-function : linear, ease-in-out; /* -moz -Firefox */
  -o-transition-timing-function : linear, ease-in-out; /* -o- Opera */
  transition-timing-function : linear, ease-in-out; /* Navigateur aux normes w3c */
  /* linear pour l'effet de transition width et ease-in-out pour l'effet de transition height */
}

Propriété CSS transition

Voila, vous connaissez maintenant l'ensemble des propriétés CSS3 de transition. Sachez qu'il existe la propriété qui permet d'écrire l'ensemble des propriétés de transition CSS3 en une seule fois.
Accepte les propriétés citées si dessous dans l'ordre :
- transition-property.
- transition-duration.
- transition-timing-function. Peut-être omise, dans ce cas c'est la valeur par défaut qui est prise.
- transition-delay. Peut-être omise, dans ce cas c'est la valeur par défaut qui est prise.
.ma-transition-css{
  -webkit-transition : width 5s linear 1s, height 10s ease-in-out 2s; /* -webkit- Chrome et Safari */
  -moz-transition: width 5s linear 1s, height 10s ease-in-out 2s; /* -moz -Firefox */
  -o-transition: width 5s linear 1s, height 10s ease-in-out 2s; /* -o- Opera */
  transition : width 5s linear 1s, height 10s ease-in-out 2s; /* Navigateur aux normes w3c */
}

Déclencher votre transition en CSS3.

Au changement d'état.

Vous pouvez déclencher votre transition CSS3 lors d'un changement d'état d'un élément, par exemple lorsque la souris survole l'élément qui doit être animé. Pour cela vous devez utilise une comme , ou ,.....ma-transition-css{
  /* -*-transition-property : width, height; versions préfixées non reprise pour l'exemple */
  transition-property : width, height;
  /* autres propriétés de transition */
  width : 30%; height : 50px;
}
.ma-transition-css:hover{
  width : 90%; height : 80px;
}

Survoler moi pour
démarrer la transition.

Assignation d'une classe en Javascript.

Une autre possibilité pour déclencher votre transition CSS3, consiste à dont les propriétés transformables ont une nouvelle valeur. <style>
#bloc-anime{
  /* -*-transition-property : width, height; versions préfixées non reprise pour l'exemple */
  transition-property : width, height;
  /* autres propriétés de transition */
  width : 30%; height : 50px
}
.ma-transition{
  width : 90%; height : 80px;
}
</style>
<div id="bloc-anime" onclick="addTransition()">element transformable</div>
<script>
function addTransition(){
  // Avec Jquery
  var oBloc = $("#bloc-anime");
  if(oBloc.hasClass("ma-transition")){
    oBloc.removeClass("ma-transition")
  }else{
    oBloc.addClass("ma-transition")
  }
  // Avec Javascript
  var oBloc = document.getElementById("bloc-anime");
  if(oBloc.classList.contains("ma-transition")){
    oBloc.classList.remove("ma-transition")
  }else{
    oBloc.classList.add("ma-transition")
  }
}
</script>
Cliquez moi pour
lancer la transition.

Assignation d'une nouvelle valeur en Javascript.

Une autre possibilité pour déclencher votre transition CSS3, consiste à aux propriétés transformables. <style>
#bloc-anime{
  /* -*-transition-property : width, height; versions préfixées non reprise pour l'exemple */
  transition-property : width, height;
  /* autres propriétés de transition */
  width : 30%; height : 50px;
}
</style>
<div id="bloc-anime" onclick="changeValTransition()">élément transformable</div>
<script>
function changeValTransition(){
  // Avec Jquery
  var oBloc = $("#bloc-anime");
  if(oBloc.attr("style") == undefined){
    oBloc.css({'width' : '90%', 'height' : '80px'})
  }else{
    oBloc.removeAttr("style");
  }
  // Avec Javascript
  var oBloc = document.getElementById("bloc-anime");
  if(oBloc.hasAttribute("style") == false){
    oBloc.setAttribute("style", "width : 90%; height : 80px");
    // ou   oBloc.style.width ="90%";  oBloc.style.height = "80px";
  }else{
    oBloc.removeAttribute("style");
  }
}
</script>
Cliquez moi pour
lancer la transition.

Exemple transition CSS3.

Vous pouvez voir des exemples des codes CSS de transition sur le .

Animation vs transition.

En règle générale, vous utiliserez plus souvent des transitions (), car votre "Animation" se limite à un changement ne nécessitant que deux étapes.

Partez du principe que vous devez utiliser les transitions par défaut. Voici les éléments qui font que vous utilisez la propriété css plutôt que la propriété css :
- L'Animation doit se répéter.
- L'Animation a besoin de points intermédiaires.
- L'Animation démarre toute seule.
- L'Animation peut faire une pause.

Sachez aussi :
- que les Transitions sont plus simples à gérer en javascript.
- que lorsqu'une transition est interrompue durant son exécution, chaque propriété modifiée peut revenir à son état initial en étant animées, ce que ne peut pas faire les animations.

Compatibilité avec les navigateurs.

Je sépare la compatibilité des propriétés préfixées(-moz-, -webkit-, -o-) de la propriété W3c. La compatibilité dépendra aussi de la compatibilité de propriété css que l'on veut animer.

Propriétés de transition préfixées -webkit- compatible avec le navigateur Chrome 2.1+
Chrome 2.1+
Propriétés de transition  compatible avec le navigateur Chrome 26+
Chrome 26+
Propriétés de transition préfixées -moz- compatible avec le navigateur FireFox 4+
FireFox 4+
Propriété d'animation CSS3 compatible avec le navigateur FireFox 19+
FireFox 19+
Propriétés de transition préfixées -webkit- compatible avec le navigateur Safari 3+
Safari 3+
Propriétés de transition compatible avec le navigateur Safari 6.1+
Safari 6.1+
Propriétés de transition CSS3 sont compatibles avec le navigateur Internet Explorer 10+
Inter. Expl. 10+
Propriétés de transition  préfixées -o-  sont compatibles avec le navigateur Opera 10.1+
Opera 10.1+
Propriétés de transition sont compatibles avec le navigateur Opera 12+
Opera 12+

Détecter en Javascript.

Voici un petit script qui ajoute une classe no-csstransitions à la balise HTML quand la propriété transition (et/ou version préfixée) n'est pas prise en compte par le navigateur. function haveTransition(){
  var bTransition = false, domPrefixes = ['Webkit','Moz','O','ms','Khtml'], elm = document.createElement("div");
  if(typeof(elm.style["transition"]) !="undefined" ) {bTransition = true;}
    for( var i = 0; i < 5; i++ ) {
      if(typeof (elm.style[domPrefixes[i]+ 'Transition']) != "undefined"){
         bTransition = true;break;
      }
    }
  if(bTransition == false){
    document.documentElement.className += " no-csstransitions";
  }
}