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 ]
Dimanche 25 août 2019 - Semaine 34 - Saint Louis (Demain: Sainte Natacha)
Aujourd'hui, c'est l'anniversaire de Sean Connery (1930-89 ans), acteur britannique (James Bond). Autre 25 août: 1944 - Libération de Paris par la 2e division blindée (2e DB) de Leclerc.
Haut de page Easy-Micro