Transitions CSS3

Les deux propriétés minimales nécessaires pour rendre fonctionnelle une transition en CSS 3 sont transition-property et transition-duration.
Il existe d'autres propriétés CSS spécifiques aux transitions : transition-timing-function, transition-delay et la notation raccourcie transition, que nous allons voir en détails.

La propriété transition-property

Cette propriété, comme son nom l'indique, permet de définir quelles propriétés seront affectées par les transitions. Ces propriétés sont précisées en les listant, séparées par des virgules. La liste des propriétés concernées est disponible sur le site du W3C.

Par exemple, nous pouvons préciser que seules la couleur (color) et la largeur (width) bénéficieront de transitions animées.

a {
  transition-property: color, width;
}

La valeur originelle de cette propriété est all. Toutefois, par défaut, la durée de transition vaut 0, ce qui annule l'effet d'animation. Pour indiquer qu'aucune propriété ne doit être animée, le mot-clé none peut être utilisé.

Connaître les différentes valeurs (mots clés ou unités) et la façon dont le navigateur calcule les étapes intermédiaire permet de mieux comprendre le déroulement de l'animation. Les différents types de données définis sont les suivants :

• Les couleurs : Les couleurs sont interpolées au travers de leurs trois canaux de base : le rouge, le vert et le bleu. Les valeurs de ces trois canaux peuvent être ramenées à des réels compris entre 0 et 1 indiquant l'intensité de la couleur pour chacun.
• Les longueurs : Les longueurs (dimensions) sont traitées comme des nombres réels.
• Les pourcentages : Les pourcentages sont traités comme des nombres réels, compris entre 0 (0%) et 1 (100%).
• Les entiers : Les entiers sont eux encore traités comme des nombres réels. Toutefois, ils doivent rester entier. C'est pourquoi le navigateur va arrondir les valeurs lors du calcul : les valeurs sont arrondies vers les bas, la partie décimale est donc simplement tronquée.
• Les nombres : Ce sont les nombres réels, ils sont donc naturellement interpolés comme tels.
• Les transformations : Les transformations font partie d'un autre module CSS 3. Par soucis de clarté, les transformations ne sont pas expliquées au sein de cet article.
• Les rectangles : Sur base des coordonnées d'un coin et sur les dimensions (hauteur et largeur). Concrètement, le rectangle peut donc être déplacé et mis à l'échelle. Les valeurs sous forme de rectangle ne sont pas légion ; La propriété crop est l'une d'entre elles.
• La visibilité : La visibilité peut être représentée par un nombre réel compris entre 0 (invisible) et 1 (visible). Par conséquent, elle sera naturellement interpolée en tant que telle.
• Les ombres : Les ombres sont traitées comme les couleurs, c'est-à-dire en interpolant les différentes valeurs des canaux rouge, vert et bleu.
• Les dégradés : Les dégradés sont interpolés sur base de la couleur définie à ses points stop (étapes intermédiaires). Pour que l'interpolation se passe correctement, il faut qu'il soit du même type (radial ou linéaire) et qu'ils comportent le même nombre de points stop.
• Le SVG : Les seules transitions autorisées se font entre les dégradés de couleur et les couleurs. Ces transitions fonctionnent alors exactement comme présentées ci-dessus.

Pour conclure, on peut retenir les différentes valeurs pour la propriété transition-property décrites ci-dessous dans le tableau.

La page d'exemple suivante permet de découvrir un effet de transition simple : celui d'un changement de couleur au survol d'un lien.