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 ]
Jeudi 24 janvier 2019 - Semaine 04 - Saint François de Sales (Demain: Saint Manuel)
Aujourd'hui, c'est l'anniversaire de Daniel Auteuil (1950-69 ans), acteur français, de Nastassja Kinski (1961), actrice et mannequin allemande et de Muriel Moreno (1963), chanteuse française (du groupe Niagara). Autre 24 janvier: 2009 - Tempête Klaus sur le sud-ouest de la France (60% des forêts sont dévastées).
Haut de page Easy-Micro