transition CSS propriété

.ma-transition-css{ width:50px; height:50px; }
.ma-transition-css:hover{ width:100px;
  transition : width 5s ease-in-out 2s;
}
// Si plusieurs transitions Css
.ma-transition-css:hover{ width:100px; height:100px;
  transition : width 5s ease-in-out 2s, height 2s ease-in-out 2s;
}

Propriétés CSS utilisées dans le raccourci transition.

Spécifier les propriétés de transition Css individuellement

Si vous ne voulez pas utiliser le raccourci transition, vous pouvez définir individuellement chaque propriété de transition Css en utilisant une des propriétés de transition CSS suivante :

• transition-property : définie les propriétés CSS qui seront animées lors de la transition Css.
• transition-delay : définie le temps de pause avant de jouer la transition CSS.
• transition-timing-function : définie la vitesse de la transition Css au cours de son exécution.
• transition-duration : définie la durée de la transition CSS.

.ma-transition{ 
  width : 150px;
  transition-property : width; 
  transition-duration : 2s;
  transition-timing-function : ease-out;
  transition-delay : 2ms;
}

Compatibilités navigateurs de la propriété transition

Propriétés CSS préfixées de transition

Vous trouverez ci-dessous les propriétés CSS préfixées équivalentes à la propriété transition CSS :

Pour Firefox 4.0+ et < 16, vous pouvez utiliser : -moz-transition.
Pour Chrome 2.1+ et Safari 3.1+, vous pouvez utiliser : -webkit-transition.
Pour Opera 10+, vous pouvez utiliser : -o-transition. Pour info, il semble les versions préfixées pour le animations CSS soient supprimées sur la version 12.50 au profit des versions w3c non préfixées.
Il existe bien une propriété css -ms-transition mais qui est compatible Internet Explorer 10 (donc pas d'intérêt de la mettre). Personnellement, je n'ai trouvé aucune documentation officielle sur la propriété css -ms-transition

Votre avis sur la définition transition en CSS