Transitions

On a vu avec les pseudo-classes et les media queries que l'on peut avoir une mise en forme qui change sous certaines conditions. L'idée des transitions est de décrire comment ces changements se font, parce par défaut c'est ... brut.

On va prendre un lien et le changer de couleur quand on le survole, comme ceci:

#delete-link:hover {
  color: red;
}

Pour décrire comment on veux transitionner d'une couleur à une autre, il faut spécifier au minimum, les attributs transition-property et transition-duration.

transition-property va nous permettre d'enregistrer des propriétés que le navigateur va devoir surveiller et animer en cas de changement.

C'est important que je le phrase comme ça parce que j'ai déjà vu des margoulins écrire :

* {
  transition-property: all;
}

... qui veux dire "on transitionne toutes les propriétés de tous les éléments", autant vous dire que c'est pas franchement respecteux des utilisateurs ayant des ordinateurs et téléphones "modestes". Et puis ce qui est animé, l'est pour attirer l'oeil et si tout attire l'oeil, alors rien n'attire l'oeil.

bref,

transition-duration prend une durée. Type de valeur que l'on avait jamais encore vu jusqu'ici et qui peut s'écrire en seconde ou en millisecondes, 1s et 1000ms étant équivalents.

À NOTER: pour les dimensions on pouvait se permettre d'ommettre l'unitée (px, em, vh, etc...) pour la valeur 0, mais dans la cas des durées il faut quand même mettre s ou ms. J'imagine que quelque part c'est une limite technique avec laquelle on doit composer pour que le système ne confonde pas une dimension avec une durée.

Donc, dans le cas de notre bouton on pourrait avoir ceci :

#delete-link:hover {
  color: red;

  transition-property: color;
  transition-duration: 2s;
}

SAUF QUE, connerie, parce que vous remarquerez que la transition ne se fait que quand notre souris arrive sur l'élément, la transition n'étant que dans le :hover alors elle n'existe que pendant que la souris est dessus, donc la transition n'existe plus quand la souris s'en va, donnant donc le changement abrut par défaut.

Il nous faudrait donc l'écrire comme ceci

#delete-link {
  transition-property: color;
  transition-duration: 2s;
}

#delete-link:hover {
  color: red;
}

Mais, c'était une erreur intéressante à faire, parceque si on spécifie une transition dans le sélecteur sans pseudo-classe et une autre dans la pseudo-classe :hover (ou une autre, je reste sur :hover pour l'exemple), alors on pourra avoir une transition d'entrée et une transition de sortie différentes.

À l'entrée celle contenue dans le sélecteur avec pseudo-classe l'emportera parcequ'elle est active et parcequ'elle fait partie d'un sélecteur plus spécifique.

À la sortie on utilisera la transition dans le sélecteur sans pseudo-classe parce celle avec sera inactive.

#delete-link {
  transition-property: color;
  transition-duration: 2s;
}

#delete-link:hover {
  color: red;
  transition-duration: 0.5s;
}

On remarque bien qu'il y a une transition d'entrée et de sorties ayant des vitesse/durée différentes.

Les autres propriétés

On n'as pas que transition-property et transition-duration.

On a aussi:

transition-delay

... qui permet de démarrer la transition en décalé.

#confirm-link {
  transition-property: color;
  transition-duration: 0.25s;
  transition-delay: 1s;
}

#confirm-link:hover {
  color: green;
  transition-delay: 0s;
}

transition-timing-function

Les fonctions de timing sont une manière de spécifier comment la transition accélère et deccélère au cours de sa durée. C'est ce qui sera le plus fondamental au feeling de votre transition.

Les fonctions les plus basiques sont:

• linear, la plus facile à comprendre. Tout au long de l'animation, le changement se fera à une vitesse constante.
• ease-in, le changement commence doucement accélère de plus en plus vite
• ease-out, le changement commence très vite et ralentit de plus en plus
• ease, qui est la fonction par défaut, accélère progressivement jusqu'au milieu de l'animation puis déccàélère progressivement jusqu'à la fin de l'animation

Personnellement, j'utilise toujours ease-out comme point de départ et ça suffit dans 90% des cas.

On pourrait en faire tout un chapitre parce qu'il est possible de lourdement modifier les fonctions qui sont fournies au point de les rendre méconnaissables, mais on est pas là pour faire un cours d'animation.

En attendant vous pourrez trouver d'autres fonctions, modifiées ou non, ici : https://easings.net/

Facilement transitionnables

Il y a des propriétés qui sont plus faciles à calculer, et qui ralentissent beaucoup moins les machines quand on les animes.

Essentiellement, il faut préférer tout ce qui n'affecte pas la mise en page.

❌ : display: none;
✅ : opacity: 0;

❌ : margin-left: 10px;
✅ : translateX: 10px;

❌ : font-size: 2em;
❌ : height: 2em;
✅ : scale: 2;

Nottez que le cas display: none; est un cas particulier, vous pourriez quand même en avoir besoin pour vraiment retirer des éléments de la page, parce qu'avec opacity:0; c'est plus performant sauf que l'élément est invisible, et donc clickable.

scale et translate, (et plus généralement transform) vont changer la taille et l'emplacement des éléments mais sans déclencher un recalcul de la mise en page. À noter que ces fonctions ne marchent pas sur les éléments display:inline;

1,2,3, many

Pour animer plusieures propriétés sur un même élément il faut toutes les specifier dans le même transition-property et séparer chaque propriété par une virgule.

a {
  transition-property: color, scale;
  transition-duration: 0.25s;
  transition-delay: 1s;

  /* pour qu'on puisse le scale */
  display: block;

  /* pour qu'il fasse sa largeur naturelle */
  /* et pas la largeure de la colonne */
  width: fit-content;
}

a:hover {
  color: red;
  scale: 0.85;

  transition-delay: 0s;
}

Et si on veux jouer avec des durée et des délais differents pour chaque propriété, alors on fait pareil, on ne spécifie qu'une seule transition-duration et transition-delay dans lesquelles on met les différentes valeurs séparées par des virgules. L'ordre des durées et délais correspondant au propriétés fournies dans transition-property.

#delete-link {
  transition-property: color, scale;
  transition-duration: 0.25s;
  /* 1s de delai pour color */
  /* mais 0s de delai pour scale */
  transition-delay: 1s, 0s;

  display: block;
  width: fit-content;
}

#delete-link:hover {
  color: red;
  scale: 0.85;

  transition-delay: 0s;
}

Shorthand

La propriété shorthand pour les transition est transition et les valeurs sont à fournir dans l'ordre

1. property
2. duration
3. timing-function
4. delay

Comme ceci :

#delete-link {
  /* transition de sortie */
  /* durée 1s avec la courbe ease-in et un délai de 0.5s */
  transition: color 1s ease-in 0.5s;
}

#delete-link:hover {
  color: red;

  /* transition d'entrée */
  /* durée de 1s avec la courbe ease-out */
  transition: color 1s ease-out;
}

Et si on veux transitionner plusieures propriétés on continue comme d'hab, on met des valeurs et on les séparé par des virgules.

#delete-link {
  /* transition de sortie */
  transition: color 1s ease-in 0.5s, scale 1s ease-in 0.5s;
}

#delete-link:hover {
  color: red;
  scale: 0.85;

  /* transition d'entrée */
  transition: color 1s ease-out, scale 1s ease-out;
}