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 25 juin 2019 - Semaine 26 - Saint Prosper (Demain: Saint Anthelme)
Aujourd'hui, c'est l'anniversaire de George Michael (1963-56 ans), auteur-compositeur-interprète anglais. Autre 25 juin: 1991 - La Croatie et la Slovénie proclament lеur indépendance de la Yοugoslavie.
Haut de page Easy-Micro