CSS3Transitions
Les effets de transitions en CSS3
Les effets de transitions permettent de changer graduellement d'un style vers un autre.
Transition sur largeur
Exemple de transition sur largeur en CSS3. Pour le test, survolez avec votre souris le cadre ci-dessous :
div {
width:250px;
background:red;
transition:width 2s;
}
div:hover { width:100%; }
width:250px;
background:red;
transition:width 2s;
}
div:hover { width:100%; }
Attention: si durée à 0, pas d'effet!
Si vous voulez prévoir le navigateur Safari : -webkit-transition:width 2s;
Au lieu d'écrire le racourci : transition:width 2s;
On aurait pu détailler les propriétés par :
transition-property: width;
transition-duration: 2s;
L'accélération : transition-timing-function
Exemple : transition-timing-function: linear;
qui permet d'exprimer l'accélération (ici linear, soit pas d'accélération) comme ceci.
qui permet d'exprimer l'accélération (ici linear, soit pas d'accélération) comme ceci.
- ease : Rapide sur le début et ralenti sur la fin.
- linear : La vitesse est constante sur toute la durée de l'animation.
- ease-in : Lent sur le début et accélère de plus en plus vers la fin.
- ease-out : Rapide sur le début et décèlere sur la fin.
- ease-in-out : Le départ et la fin sont lents.
Délai de déclenchement : transition-delay
transition-delay: 2s;Transition multiple
Exemple de transition multiple en CSS3 :
div.mondiv {
width:250px;
transition:width 2s;
}
div.mondiv:hover
{
width:100%;
color:#000088;
text-shadow: 5px 5px 5px #FF0000;
background-color:#00ff00;
}
width:250px;
transition:width 2s;
}
div.mondiv:hover
{
width:100%;
color:#000088;
text-shadow: 5px 5px 5px #FF0000;
background-color:#00ff00;
}
