Salut, Les transitions en CSS

J’aurais pu intituler cet article « Javascript pour les feignants » c’est d’ailleurs ce que j’avais prévu avant de changer. Les transitions en CSS sont ont été ajoutées depuis CSS3. Avant, pour faire ces types d’effets sur une page web, il fallait coder en Javascript.

Avec l’ajout de ces nouvelles propriétés, on va vraiment pouvoir aller plus loin dans l’animation de nos pages de débutant, sans avoir à écrire une seule ligne de jQuery ou de Javascript!

Je découvre ces propriétés en même temps que toi, donc je n’ai pas idée de ce qui m’attends. Je partage donc avec toi mon apprentissage en suivant le cours d’Openclassrooms, sur les propriétés CSS avancées. La seule animation que je connaisse est celle qui consiste à modifier certaines propriétés au survol en utilisant le selecteur CSS :hover. Je vais utiliser ce sélecteur pour qu’une fois sur Codepen, tu puisses voir la différence dès que tu passes ta souris au dessus de l’exemple qui t’intéresse. J’avais fait un peu le même principe dans mon précédent article sur les propriétés avancées en CSS.

Les propriétés de bases

Pour bien comprendre  comment fonctionnent les propriétés qui vont nous permettre de mettre en évidence ces transitions, je vais les appliquer à des propriétés CSS qui permettent de modifier l’apparence d’un élément:

  • width: la largeur de l’élément,
  • height: la hauteur de l’élément,
  • color: la couleur de la police,
  • background-color: la couleur de l’arrière plan,
  • box-shadow: définit une ombre à l’élément,
  • border: définit une bordure,
  • border-radius: permet d’arrondir les angles d’un élément,
  • text-shadow: donne une ombre au texte.

Bon il doit bien en avoir d’autre mais là on a déjà largement de quoi s’amuser, et de quoi en mettre des tonnes, je sais même pas si jej les utiliserais toutes dans mes exemples..?

Attention, je reviens à ce que j’ai lu dans le livre de Dan Cederholm, « CSS3 pour les web designer », qui explique qu’il ne faut pas noyer l’info dans tous ces effets. Ils ne doivent pas perturber l’utilisation et la lecture de ton site ou de ta page, ils sont justes là pour rendre les choses plus fluides et belles à regarder. Je pousserai même le propos en disant qu’elles ne doivent pas faire vivre une mauvaise expérience de navigation et d’utilisation à l’utilisateur. En tant que développeur on est là , je pense, pour faire fonctionner les choses et les rendre utilisables au service du contenu. Le contenu ne doit à mon avis pas se mettre au service de la batterie d’effet que l’on a à notre disposition.

Pour démarrer avec les transitions il faut ajouter 2 propriétés CSS à notre arsenal déjà riche:

  • transition-propriety: indique à quelle propriété CSS on applique la transition. On peut en mettre plusieurs, il faut juste les séparer par une virgule.
  • transition-duration: indique la durée de la transition, à donner en seconde (par ex: 2s) ou en milliseconde (500ms). Les millisecondes sont 1000 fois plus petites que les secondes: 1 secondes = 1000ms.

Il existe pour la propriété transition-property une valeur par défaut, all, qui applique la transition à toutes les propriétés CSS de base de l’éléments, ce qui évite de toutes les nommer. Si on souhaite une modification au survol, seules les propriétés qui ont un état changeant seront affectées. Comme ces effets sont très visuels, je t’invite à te rendre sur Codepen pour voir les comportements des éléments comportant des transitions. Comme d’habitude, n’hésites pas à faire des tests et à beaucoup manipuler ces propriétés.

 Des réglages plus précis

CSS3 permet de faire des animations encore plus précises. On peut notamment choisir à quel moment la transition doit s’effectuer et si le « mouvement » doit avoir des accélérations particulières.

On peut donc se servir de deux propriétés CSS complémentaires:

  • transition-delay: qui permet d’indiquer quand doit démarrer l’animation. Cette propriété s’exprimera en secondes ou en millisecondes. Attention à ne pas mettre des retards trop long, sinon l’utilisateur va penser que ça ne fonctionne pas et passer à autre chose.
  • transition-timing-function: cette propriété permet d’indiquer quel type d’accélération devra avoir l’animation. Cette propriété peut comporter plusieurs valeurs différentes:
    • ease: rapide au début et ralenti à la fin, c’est la valeur par défaut.
    • ease-in: lent au début et plus rapide à la fin,
    • ease-out: rapide au début et décélère à la fin,
    • ease-in-out: lent au début puis rapide et décélère à la fin.
    • linear: vitesse constante, pas d’accélération,
    • step-start: l’animation passe immédiatement à l’état final,
    • step-end:l’animation passe directement à l’état final à la fin de la durée de l’animation sans l’exécuter.

Toutes ses indications sont assez subtiles, sauf step-start qui est assez brutale. Pour bien voir comment se comporte un élément avec telle ou telle propriété, n’hésite pas à faire des déplacements longs pour que les accélérations puissent être visibles. Tu peux tester ces propriétés en allant jeter un oeil sur le projet Codepen.

De la haute précision!

Bon c’est super, nos éléments s’animent facilement et les possibilités sont grandes, mais on peut encore aller plus loin!

Tu t’es sûrement rendu compte que les propriétés citées au dessus étaient nombreuses mais que l’effet n’était parfois pas très flagrant. Et bien il est possible de réaliser soit même sa transition personnalisée, grâce à la « courbe de bezier »,  et la propriété associée cubic-bezier().

Donc là il y a des math qui se cachent là dessous, et je n’ai pas fait d’étude assez élevé pour pouvoir parler en détail de cette courbe de bézier. J’ai été sur Wikipédia pour voir ce que ça racontait, degrés 0 de la recherche sur internet, mais j’avoue que je n’ai pas le niveau en math pour comprendre tout ça. Cela dit, je ne pense pas avoir besoin de résoudre des équations pour me servir de cette propriété.

Pour définir une courbe de bezier, il faut 4 points, pour nous qui ne sommes pas des stars en math, on dira qu’il nous faut 4 valeurs. Etant parfaitement incapable de construire une courbe de bezier et d’imaginer quel va être le mouvement qui va en découler, je te conseille de te rendre sur des applis web qui te permettent de créer la courbe en déplaçant 2 curseurs, et ensuite ça te donne les points à saisir à l’intérieur de la propriété.

Voici donc quelques outils qui t’aideront à créer et à personnaliser tes transitions:

Voici comment écrire cette propriété:

.bezier
{
    width: 200px;
    height: 200px;
	border-radius:5px;
    background-color: yellow;
	transition-property: all; 
    transition-duration: 2s;
	transition-timing-function:cubic-bezier(1, -1.59,1,0.39);
}

.bezier:hover
{
  	background-color: blue;
	width:200px;
	transform:translate(100px, 100px);
}

Pour voir comment cela se traduit à l’écran, viens jeter un oeil sur Codepen.

Pour cet exemple, j’ai trituré les leviers permettant de faire varier les courbes et j’ai pu faire une marche arrière avant de revenir en accélérant vers le point d’arrivé. Il y a pas mal de possibilité mais attention à ne pas mettre des animations comme celle de l’exemple qui à mon avis sont inutilisables.

Une seule pour les gouverner toutes…

Il existe une super propriété qui permet de regrouper toutes les propriétés vues plus haut, il s’agit de transition. Comme pour la propriété CSS border par exemple, on peut indiquer quelle propriété on veut modifier, combien de temps dure la modification et quelle forme doit prendre la transition en une seule ligne de code!

Pour modifier toutes les propriétés pendant 1,5 secondes, en suivant une courbe de bézier, on peut écrire le code CSS suivant:

.groupe
{
    width: 200px;
    height: 200px;
	border-radius:5px;
    background-color: red;
	transition:cubic-bezier(0.38, -0.58,0.9,0.1) 1.5s all;
}

.groupe:hover
{
  	background-color: blue;
	width:200px;
	transform:translateX(100px);
}

Encore une fois l’avantage de cela, est qu’on limite les lignes de code et donc les erreurs…

Et la compatibilité dans tout ça?

Le MDN indique que ces propriétés sont encore à l’état expérimentale, alors que sur le site CAN I USE, je vois que la grande majorité des navigateurs ont implémentés cette propriété. Dans le livre « CSS3 pour les Web designer », qui date d’août 2016, il est indiqué qu’il vaut mieux conserver les préfixes. Personnellement je vais suivre cette indication, et continuer à écrire les préfixes. N’oublie pas qu’il faut indiquer les préfixes en premier et la propriété seule en dernier comme ci dessous:

.groupe
{
    width: 200px;
    height: 200px;
	border-radius:5px;
    background-color: red;
	
	-webkit-transition:cubic-bezier(0.38, -0.58,0.9,0.1) 1.5s all;
	-ms-transition:cubic-bezier(0.38, -0.58,0.9,0.1) 1.5s all;
	-moz-transition:cubic-bezier(0.38, -0.58,0.9,0.1) 1.5s all;
	-o-transition:cubic-bezier(0.38, -0.58,0.9,0.1) 1.5s all;
	transition:cubic-bezier(0.38, -0.58,0.9,0.1) 1.5s all;
}

.groupe:hover
{
  	background-color: blue;
	width:200px;
	
	-webkit-transform:translateX(100px);
	-ms-transform:translateX(100px);
	-moz-transform:translateX(100px);
	-o-transform:translateX(100px);
	transform:translateX(100px);
}

D’où l’intérêt de la super propriété… ça limite tout de même un peu le nombre de ligne à écrire!

Si tu ne souhaites pas utiliser la propriété transition seule, mais les propriétés vues plus haut, il faut également prévoir d’utiliser les préfixes pour chacune d’entres elles…

Voilà pour les transitions CSS, demain gros morceaux, j’espère que j’aurais le temps de finir l’article d’ici là, on parlera des animations CSS, avec notamment l’utilisation des @keyframes. Cela fait très longtemps que je vois ces propriétés et j’avais vraiment envi de savoir faire ça!

L’article de demain devrait donc assez sympa et ludique, de quoi s’amuser tout le week end avec!

A bientôt,

Guillaume