Les transitions en CSS

 

Dans l'exemple ci-dessus, nous utilisons les propriétés transition-property, transition-duration et transition-delay.
transition-property : la propriété transition-property définit le nom de la propriété CSS à laquelle l'effet de transition va être destiné.
Dans l'exemple donné, il s'agit donc de font-size.

transition-duration: la propriété transition-duration définit la durée de la transition. Elle peut s'exprimer en seconde ou milliseconde.

transition-delay: la propriété transition-delay définit à partir de combien de temps l'effet de transition commencera. Elle peut s'exprimer en seconde ou milliseconde.

Testez en modifiant les valeurs :

Nous avons dans l'exemple précédent utilisé l'animation sur la taille du texte. Nous allons maintenant agrandir le bouton avec la propriété transform à laquelle nous ajoutons la fonction scale(1).
1 étant la valeur par défaut, nous allons agrandir ici le bouton de 15%.
A noter que vos propriétés se placent toujours sur l'élément contenant le point de départ de l'élément et que le changement d'état s'effectue sur la pseudoclasse (ici :hover).

A vous de tester :

Refactoring
Le refactoring, "clean code", consiste à réécrire le code afin d'améliorer sa structure et donc de l'optimiser.
Dans l'exemple ci-dessus, au-lieu d'écrire ces deux lignes :
transition-property:transform;
transition-duration:2s;

Nous pouvons plus simplement écrire :
transition : transform 2s;