Les animations CSS permettent d'ajouter des effets visuels dynamiques à vos pages web sans utiliser JavaScript. Elles sont idéales pour attirer l'attention des utilisateurs ou améliorer l'expérience utilisateur.
1. Les Transitions CSS
Les transitions permettent de créer des effets de changement progressif entre deux états.
Exemple : Changement de couleur au survol
button {
background-color: blue;
color: white;
transition: background-color 0.3s ease;
}
button:hover {
background-color: green;
}
2. Les Animations avec @keyframes
Les animations définissent des étapes précises pour animer un élément.
Exemple : Animation de déplacement
@keyframes slide {
0% {
transform: translateX(0);
}
100% {
transform: translateX(100px);
}
}
.box {
width: 100px;
height: 100px;
background-color: red;
animation: slide 2s infinite alternate;
}
3. Propriétés d'animation
- animation-name : Nom de l'animation (défini avec @keyframes).
- animation-duration : Durée de l'animation.
- animation-timing-function : Courbe de vitesse (ease, linear, etc.).
- animation-iteration-count : Nombre de répétitions (infinite pour une boucle infinie).
4. Exemple Pratique : Animation de Chargement
@keyframes rotate {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}
.loader {
width: 50px;
height: 50px;
border: 5px solid lightgray;
border-top: 5px solid blue;
border-radius: 50%;
animation: rotate 1s linear infinite;
}
HTML :
<div class="loader"></div>
5. Conclusion
Les animations CSS sont un excellent moyen d'améliorer l'interactivité et l'esthétique de vos pages web. Combinez-les avec des transitions pour des effets encore plus fluides.
Retour à la liste
Richard Bonnegent
Commentaires (0)