Accueil    CSS    Propriété transition
 



style css transition  Style CSS transition

«  Partie précédente  |  Index  |  Partie suivante  »


La propriété transition permet de définir en une déclaration l'ensemble des propriétés d'une transition :
    - transition-delay (temps d'attente avant le début de la transition)
    - transition-duration (durée de la transition)
    - transition-property (liste des propriétés css impactées par la transition)
    - transition-timing-function (modifie la vitesse de l'animation sur la durée de celle-ci)

Une transition implémente de façon animée le changement entre un état initial et un état final pour des propriétés css spécifiques (la transition des anciennes aux nouvelles valeurs se faisant progressivement sur une durée paramétrable).
On utilise généralement des transformations (style css transform) pour effectuer des transitions visuelles élaborées, mais il est également possible de se baser sur la taille ou la couleur des éléments par exemple.

La transition débute lorsqu'un évènement est déclenché. Il peut s'agir de pseudo-classes comme ":hover" (déclencheur le plus fréquent) ou ":active" ou bien d'un déclenchement par javascript.

Actuellement chaque navigateur se base sur sa propre version de la propriété transition :
    - Chrome et safari utilisent la propriété "-webkit-transition"
    - Firefox utilise la propriété "-moz-transition"
    - Opera utilise la propriété "-o-transition"
    - Internet Explorer n'implémente pas encore les transitions css



Propriétés pour le style animation :




Propriété Définition Valeurs CSS
transition Permet de définir tous les paramètres d'une transition en une déclaration CSS 3
transition-delay Détermine le délai à respecter avant de démarrer la transition (en secondes ou millisecondes) durée :
##s
##ms		 CSS 3
transition-duration Détermine la durée pour compléter la transition (en secondes ou millisecondes) durée :
##s
##ms		 CSS 3
transition-property Permet déclarer les styles css qui seront transformés durant la transition styles css CSS 3
transition-timing-function Détermine la vitesse d'exécution de la transition sur ses différentes parties (début milieu fin) cubic-bezier(val,val,val,val)
ease
ease-in
ease-out
ease-in-out
linear		 CSS 3


Exemple d'utilisation du style css transition :







<style type="text/css">
.transition-div{
   position:relative;
   width:150px;
   height:60px;
   line-height:60px;
   font-size:14px;
   text-align:center;
   border:solid 1px black;
   border-radius:5px;
   background-color:silver;
   -webkit-transition-property:width,height,line-height,background-color,-webkit-transform;
   -webkit-transition-duration:1s,1s,1s,1s,1s,1s;
   -moz-transition-property:width,height,line-height,background-color,-moz-transform;
   -moz-transition-duration:1s,1s,1s,1s,1s,1s;
   -o-transition-property:width,height,line-height,background-color,-o-transform;
   -o-transition-duration:1s,1s,1s,1s,1s,1s;
   transition-property:width,height,line-height,background-color,transform;
   transition-duration:1s,1s,1s,1s,1s,1s;
}

.transition-div:hover{
   width:220px;
   height:120px;
   line-height:120px;
   font-size:20px;
   background-color:steelblue;
   -webkit-transform: rotate(360deg);
   -moz-transform: rotate(360deg);
   -o-transform: rotate(360deg);
}
</style>



<div style="padding:20px;">
   <div class="transition-div">
      Transition au survol
   </div>
</div>




Transition au survol









Transition au survol