Les transitions en CSS permettent de modifier un élément sur une durée limitée de façon simple.
Pour effectuer une transition en CSS, vous allez :
- définir la propriété à modifier
- la valeur correspondante au début de votre animation
- sa durée
- comment la transition va s'effectuer
Exemples d'animations avec des transitions en CSS
Prenons en premier exemple une animation simple que nous allons ensuite détailler (passez votre souris sur le bouton). Vous pourrez ensuite tester par vous-même sur codepen.
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.
See the Pen
Untitled by anna (@cds-creation-de-site)
on CodePen.
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).
See the Pen
transform:scale() by anna (@cds-creation-de-site)
on CodePen.
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;
transition : transform 2s;