Transitions en CSS 3

Les transitions permettent de passer d'un affichage à un autre pour un même objet, d'un contenu à un autre, de façon progressive.

La liste de des éléments auxquels on peut donner un affichage progressif est donnée dans la spécification.

Démonstration

Passer la souris sur l'image ci-dessous et cliquer pour charger l'image en taille réelle.

Syntaxe de la propriété

transition

Forme compacte, voir plus loin.

transition-property

Indique à quelle propriété on fournit une transition. Par défaut all, toutes les propriétés.
Par exemple pour changer la couleur progressivement: 

transition-property:color;

transition-duration

Définit la durée totale du temps de la transition. Par défaut la valeur est 0, il n'y a aucune transition.
Exemple, pour une durée d'une demi-seconde:

transition-duration:0.5s

transition-timing-function

Définit la forme de la progression dans le temps, avec des accélérations possibles durant la transition.
Cela est représenté par une courbe de bézier avec quatre paires de points dont la paire de départ (0,0) et la paire d'arrivée (1,1) sont implicites.
Les deux paires de coordonnées que l'on donne correspondent à deux points intermédiaires qui orientent la forme de la courbe.

Liste des valeurs possibles:
cubic-bezier(x1, y1, x2, y2): Les valeurs sont des nombres réels allant de 0 à 1.
ease: Par défaut, correspond à cubic-bezier(0.25, 0.1, 0.25, 1.0). Cela donne un départ et une arrivée ralentis.
linear: Une fonction linéraire, que l'on peut exprimer aussi par cubic-bezier(0.0, 0.0, 1.0, 1.0).
ease-in: cubic-bezier(0.42, 0, 1.0, 1.0). Départ ralenti.
ease-out: cubic-bezier(0, 0, 0.58, 1.0). Arrivée ralentie.
ease-in-out: cubic-bezier(0.42, 0, 0.58, 1.0). Départ et arrivée ralentis.

transition-delay

Indique à quel moment démarre la transition (par rapport à l'évènement qui la déclenche).
Par exemple pour un délai de réaction d'une seconde:

transition-delay: 1s;

Par défaut le délai est de 0.

Forme compacte

Les quatre propriétés peuvent être réduites à une seule.
On place dans l'ordre: transition-property, transition-duration, transition-timing-function, transition-delay. Pas de virgules pour séparer les valeurs, comme usuel.

transition: all 2s ease 0;

On peut ommettre les dernières valeurs.

Utiliser des listes

On peut avoir une liste de groupes de propriétés séparées par une virgule:

transition: color 0.2s ease 1s, top 2s ease-in 0;

Les propriétés élémentaires comme la forme compacte peuvent comporter des listes séparées par une virgule:

transition-property:color,top; 
transition-duraction:1s, 5s;

Les éléments des listes sont associés par leur position dans la liste. Une durée d'une seconde est attribuée à la propriété color, une durée de 5 secondes à la propriété top.

Code de la démonstration

Code HTML : 

<div class="demo">
<a href="https://www.xul.fr/images/island.jpg"><img src="images/thumb-newyork.jpg" ></a>
<a href=""><img  src="images/thumb-island.jpg"></a>
</div>

Code CSS : 

.demo 
{
  margin-bottom:20px;
  position:relative;
  width:300px; 
  height:215px;
  overflow:hidden;	
}
.demo img 
{
  float: left;	
  margin:0;
  -webkit-transition: all 0.3s ease-in;
  -moz-transition: all 0.3s ease-in;
  transition: all 0.3s ease-in;
  border:none;	
}
.demo a:hover img 
{
  margin-top:-215px;
}

Explications :

Les balises <a> sont nécessaires pour utiliser la propriété hover sous d'anciens navigateurs (même s'il n'y a pas de transition, cela permet de changer l'image).
Les évènements onMouseOver et onMouseOut ne fonctionnent pas ensemble dans ce cas de figure (j'ai essayé de les utiliser).

Les deux images sont affichées dans le calque mais la seconde est cachée grâce à la propriété overflow:hidden. Quand la souris passe sur le calque, le haut est décalé de la hauteur de la première image ce qui fait apparaître la seconde. Cela fonctionne avec tous les navigateurs, mais l'effet de transition ne s'applique qu'avec les plus récents.

Références

© 2011-2022 Xul.fr