Admin/Dev

Alors qu'il était nécessaire, il y a quelques années, d'utiliser des scripts pour animer certains éléments HTML d'une page, il est désormais possible de réaliser des animations plus ou moins complexes en utilisant uniquement des styles CSS. Désormais bien encrées dans les navigateurs, il serait dommage de ne pas profiter de ces fonctionnalités pour rendre son site plus moderne et plus dynamique.

L'intérêt est que ces transitions sont entièrement automatisées, depuis un état de départ, vers un état d'arrivée que vous définissez, c'est le navigateur qui va gérer toute l'animation.

Tout simplement, les transitions définies dans les styles s'exécuteront dès que le navigateur détecte un changement de style sur l'élément ciblé. Cela peut se produire lors de l'application d'une pseudo-classe, comme le survol de la souris par exemple, en restant dans du CSS pure, ou alors avec un changement de classe ou de style effectué par un script Javascript.

Avec ces transitions il est possible de faire des liens un peu plus sympathiques, ou des boutons plus dynamiques, en quelques minutes.

Pour mettre en application une transition, commençons par définir l'objet sur lequel on va interagir, dans un document HTML, créez un div avec une classe que je nommerai transitionTest pour le tutoriel, puis insérez la classe CSS suivante qui lui sera appliquée

.transitionTest {
position:absolute; left:100px; top:100px; width:100px; height:100px; background:#CC3333; opacity:1;
}

Nous voila avec un carré rouge situé en haut à gauche de notre navigateur, mais légèrement décollé du bord. Nous avons défini notre état de départ.

Continuons en définissant notre état d'arrivée, s'activant au survol du carré par la souris

.transitionTest {
position:absolute; left:100px; top:100px; width:100px; height:100px; background:#CC3333; opacity:1; 
}
.transitionTest:hover {
background:#3333cc; 
}

Si vous glissez votre souris, sur le carré, il deviendra bleu, mais le changement sera instantané, et de manière assez brutale.

Appliquons désormais une transition pour un changement de couleur un peu plus fluide. La définition CSS s'appelle tout simplement transition et doit être intégrée à l'état de départ. A chaque transition, il faut indiquer la définition qui sera animée, et un délai qui correspondra au temps que prendra l'animation pour l'aller du départ à l'arrivée.

Indiquons dans notre cas, une transition sur la couleur de fond, d'une demi-seconde.

.transitionTest {
position:absolute; left:100px; top:100px; width:100px; height:100px; background:#CC3333; opacity:1;
transition:background 0.5s; 
}
.transitionTest:hover {
background:#3333cc; 
}

Et le tour est joué !

Il est possible d'appliquer plusieurs animations dans la même définition CSS, il suffit d'ajouter la définition à animer ainsi que la durée, qui n'est pas obligée d'être la même pour toutes les animations.

Attention à la syntaxe, elle doit être respectée à la lettre ! Chaque animation est séparée par une simple virgule alors que le séparateur de la durée doit être un point.

Ajoutons une animation sur l'opacité du carré. Commençons par indiquer la valeur d'arrivée

.transitionTest:hover {
background:#3333cc; opacity:0.2; 
}

puis la transition

.transitionTest {
position:absolute; left:100px; top:100px; width:100px; height:100px; background:#CC3333; opacity:1; transition:background 0.5s, opacity 1s; 
}

Il est possible d'appliquer une transition sur de nombreuses définitions CSS, notamment celles qui sont définies en numéraire : position, taille, margin, padding, couleurs. Je vous invite à tester avec les positions et tailles déjà disponibles dans les CSS que l'on a écrit. (Attention, lors du déplacement, la souris peut ne plus être en survol et donc l'animation repartira dans l'autre sens jusqu'à revenir sur la souris, et ainsi de suite...).

Cela ne fonctionne pas sur les définitions type italique, de changement de casse ou encore le gras malgré le fait qu'on puisse l'écrire avec des valeurs numériques, mais cela fonctionnera, par contre, sur une taille de caractère.

Mais avec tout ce qui est disponible il y a déjà de quoi faire parler sa créativité. Il faut seulement faire attention, car chaque navigateur va interpréter les transitions à sa manière, et elle sera peut être différente du navigateur d'à côté.

Pour finir, vous avez certainement remarqué que, par défaut le navigateur réalise l'animation inverse automatiquement pour revenir dans son état initial, pas besoin de s'en occuper non plus. Pratique !

Dans un prochain article, nous verrons comment aller plus loin avec ces transitions.