Easy-Micro


LANGAGE CSS3
Transitions

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%; }

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.

  • 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;
}


Suivez les aventures des skippers aquitains sur EasyVoile.com
Flux RSS Easy-Micro - Abonnez-vous Easy-Micro [ François Bisch ]
Mardi 19 mars 2019 - Semaine 12 - Saint Joseph (Demain: Saint Herbert)
Aujourd'hui, c'est l'anniversaire de Bruce Willis (1955-64 ans), acteur américain et de Guesch Patti (1946), chanteuse française (tube "Etienne, Etienne"). Autre 19 mars: c'est la fête des pères en Espagne, en Italie et au Portugal (France: Troisième dimanche de juin).
Haut de page Easy-Micro