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 transition-duration 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 suivi par "s", 0s par défaut.
- millisecondes : le nombre sera suivi 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 transition-delay 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 suivi par "s", 0s par défaut.
- millisecondes : le nombre sera suivi 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 transition-timing-function.
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é transition 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 */
}
