Les transitions en CSS

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.

fly over me !

 

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 :

See the Pen
Untitled
by anna (@cds-creation-de-site)
on CodePen.

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 :

See the Pen
transform:scale()
by anna (@cds-creation-de-site)
on CodePen.

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;
Merci de suivre et liker 🙂
error

Vous aimez ce blog ? Merci de liker ou passer le mot :)

Retour haut de page