La propriété CSS transition permet d’animer les changements de valeur de plusieurs propriétés CSS d’un élément lorsqu’il passe d’un état à un autre. Cela crée un effet visuel fluide et agréable, rendant votre interface utilisateur plus dynamique et interactive.
La propriété aspect-ratio
- transition: width 1s;
- transition: background 1s;
- transition: rotate 1s;
- transition: all 1s;
Survolez moi pour découvrir ma transition
La propriété transition est une méthode pour appliquer des transitions en douceur entre deux états de style. Elle est souvent utilisée pour améliorer l’interactivité d’un site web, par exemple lorsqu’un utilisateur survole un élément ou clique dessus.
Les sous-propriétés de la propriété CSS transition
Les transitions CSS sont définies avec les propriétés suivantes :
- propriété : Nom de la propriété CSS à animer (séparez plusieurs propriétés par des virgules ou
allpour toutes les propriétés). - durée : Durée de l’animation en secondes (ex:
0.5s,2s). - fonction-de-temporisation : Fonction qui définit la progression de l’animation (facultatif, valeurs par défaut :
ease,ease-in,ease-out,ease-in-out). - délai : Délai avant le début de l’animation en secondes (facultatif, valeur par défaut :
0s).
Syntaxe de base :
transition: propriété durée fonction-de-temporisation délai;Par exemple, pour changer la couleur de fond en 3 dixièmes de seconde :
transition: background-color 0.3s ease-in-out;Exemple de transition de couleur en CSS
Prenons un premier exemple simple où nous changeons la couleur d’arrière-plan d’un bouton lors du survol :
<button class="button">Survolez-moi</button>.button {
background-color: #3498db;
color: white;
padding: 15px 30px;
border: none;
cursor: pointer;
transition: background-color 0.3s ease-in-out;
}
.button:hover {
background-color: #2ecc71;
}Dans cet exemple, lorsque l’utilisateur survole le bouton, la couleur d’arrière-plan passe de bleu #3498db à vert #2ecc71 sur une durée de 0.3 secondes avec une fonction de timing ease-in-out, qui commence lentement, accélère, puis ralentit à nouveau.
Exemple de transition de taille en CSS
Un autre exemple courant est le changement de taille d’un élément :
<div class="box"></div>.box {
width: 100px;
height: 100px;
background-color: #e74c3c;
transition: width 0.5s ease, height 0.5s ease;
}
.box:hover {
width: 150px;
height: 150px;
}Ici, lorsqu’on survole la boîte rouge, sa largeur et sa hauteur augmentent progressivement de 100px à 150px en 0.5 secondes, en utilisant la fonction de timing ease.
Exemple de transition multiple en CSS
Il est également possible d’animer plusieurs propriétés en même temps :
<div class="card">Passez la souris sur moi</div>card {
width: 200px;
height: 300px;
background-color: #9b59b6;
color: white;
padding: 20px;
transition: background-color 0.4s ease, transform 0.4s ease;
}
.card:hover {
background-color: #8e44ad;
transform: rotate(10deg) scale(1.1);
}Dans cet exemple, lorsque la souris passe sur la carte, la couleur d’arrière-plan change de #9b59b6 à #8e44ad, et la carte tourne de 10 degrés et s’agrandit de 10%, tout cela en 0.4 secondes.
Exemple de délais de transition en CSS
Les délais de transition permettent de différer le début de l’animation :
<div class="circle"></div>.circle {
width: 50px;
height: 50px;
background-color: #e67e22;
border-radius: 50%;
transition: background-color 0.5s ease 1s, transform 0.5s ease 1s;
}
.circle:hover {
background-color: #d35400;
transform: scale(1.5);
}Ici, la transition de la couleur d’arrière-plan et l’agrandissement de la taille de l’élément commencent après un délai de 1 seconde lorsque la souris survole l’élément.
La propriété CSS transition est un outil puissant pour créer des animations fluides et améliorées sur les sites web. En combinant différentes propriétés telles que transition-property, transition-duration, transition-timing-function et transition-delay, on peut concevoir des interactions utilisateur engageantes et intuitives. Les exemples fournis montrent comment utiliser transition pour animer des changements de couleur, de taille et de transformation, rendant l’expérience utilisateur plus agréable.
