Donner de la vie à vos pages Web : Une plongée dans les animations CSS

Les animations CSS apportent dynamisme et interactivité à vos pages web, transformant des éléments statiques en expériences visuellement attrayantes. Ce tutoriel vous guidera à travers les principes fondamentaux des animations CSS, vous permettant d'ajouter des mouvements subtils ou de créer des effets interactifs complexes.

Comprendre les concepts de base :

• Images clés : Pierre angulaire des animations CSS, les images clés définissent les états de départ et d'arrivée (et éventuellement les étapes intermédiaires) d'une animation. Vous utilisez les images-clés @keyframes pour définir ces états.
• Propriétés d'animation : Une fois que vous avez défini les images clés, vous les appliquez à un élément à l'aide de la fonction animation propriété. Cette propriété spécifie des détails tels que le nom de l'animation (qui fait référence à vos images clés), la durée, la fonction de synchronisation (comment l'animation progresse dans le temps), le nombre d'itérations (combien de fois l'animation est jouée), etc.

Construire sa première animation :

Créons une animation simple qui fait légèrement pulser un bouton :

.pulsating-button {
  frontière: 2px solide #333;
  rembourrage: 10px 20px;
  couleur de fond: #ddd;
  curseur: pointeur ;
  position: relative ;  /* Requis pour le positionnement des pseudo-éléments */
}

.pulsating-button::après {
  contenu: "";
  position: absolu ;
  inset : 0;  /* L'élément s'étire pour remplir toute la zone du bouton */
  animation: pulsation 0.7s facilité d'entrée et de sortie à l'infini ;
  couleur de fond: rgba(255, 255, 255, 0.3); /* Blanc semi-transparent */
}

@keyframes pulser {
  de { opacité: 1.0; }
  à { opacité: 0.8; }
}

Explication :

1. Nous définissons une classe bouton-pulsant pour le style du bouton.
2. À l'intérieur de la classe, nous ajoutons un pseudo-élément ::après pour créer un élément invisible placé derrière le bouton proprement dit. Cela permet d'obtenir l'effet d'animation sans affecter la fonctionnalité du bouton.
3. Les animation du pseudo-élément fait référence à la propriété pulser définie à l'aide de l'animation @keyframes règle.
4. Les @keyframes pulsate définit deux images clés :
   • de: définit l'opacité à 100% (entièrement visible).
   • à: définit l'opacité à 80% (légèrement transparent), ce qui crée un effet de pulsation.

Exploration des propriétés d'animation :

Les animation property offre diverses options pour personnaliser vos animations :

• nom de l'animation: Fait référence au nom de votre définition d'images clés (par ex, nom de l'animation : pulsate).
• durée de l'animation: Définit la durée de l'animation (par ex, durée de l'animation : 1s).
• animation-timing-function: Contrôle le rythme de l'animation (par ex, fonction de synchronisation de l'animation : ease-in-out). Les options courantes sont les suivantes faciliter (par défaut, début et fin progressifs), linéaire (vitesse constante), faciliter (début lent, fin rapide), et faciliter (début rapide, fin lente).
• animation-iteration-count: Définit le nombre de fois que l'animation est jouée (par ex, nombre d'itérations de l'animation : infini).
• animation-direction: Spécifie la direction de la lecture de l'animation (par ex, direction de l'animation : alternée pour les directions alternées).
• délai d'animation: Définit un délai avant le début de l'animation (par ex, animation-delay : 0.5s).

Combiner des animations pour obtenir des effets complexes :

Vous pouvez appliquer plusieurs animations à un seul élément pour créer des effets plus complexes. Par exemple, vous pouvez combiner l'effet de pulsation avec une animation de changement de couleur pour une interaction plus perceptible avec un bouton.

Techniques avancées :

Au fur et à mesure de votre progression, vous explorerez des techniques d'animation avancées telles que :

• Transformations : Animer les propriétés des éléments comme la position, la rotation, l'échelle et l'inclinaison à l'aide de transformer dans les images clés.
• La sténographie de l'animation : Combiner des propriétés d'animation comme durée de l'animation, animation-timing-functionet animation-iteration-count en une seule propriété abrégée pour une syntaxe plus simple.
• Événements d'animation : Utiliser des événements tels que démarrage de l'animation et fin de l'animation pour déclencher du code JavaScript à des moments précis du cycle d'animation.

Ressources pour une exploration plus approfondie :

• Tutoriel d'animation CSS par W3Schools (https://www.w3schools.com/css/css3_animations.asp) : Une introduction complète aux animations CSS avec des exemples et des références.
• Tutoriel d'animation CSS par CSS-Tricks (https://css-tricks.com/almanac/properties/a/animation/) : Un guide détaillé avec des explications et des extraits de code pour diverses animations.

.rotating-banner {
  largeur: 200px;
  hauteur: 150px;
  couleur de fond: #ccc;
  marge: 0 auto ;
  animation: tourner 5s linéaire infini ;
}

@keyframes tourner {
  de { transformer: tourner(0deg); }
  à { transformer: tourner(360 degrés); }
}

.rebond {
  animation: bounce 1s facilité de sortie infinie ;
}

@keyframes rebond {
  0%, 100% { transformer: traduireY(0); }
  50% { transformer: traduireY(-10px); }
}

.bouton {
  ... (bouton styles) ...
  animation: mettre en valeur 0.5s la facilité d'entrée et de sortie ;
}

.bouton:hover {
  animation: aucun ;  /* Désactiver l'animation au survol */
}

@keyframes mettre en évidence {
  de { couleur de fond: #ddd; }
  à { couleur de fond: #ffe0e0; }
}

.bouton.cliqué {
  animation: surligner-renverser 0.5s la facilité d'entrée et de sortie ;
}

@keyframes highlight-reverse {
  de { couleur de fond: #ffe0e0; }
  à { couleur de fond: #ddd; }
}

/* Ajouter du JavaScript pour écouter l'événement "click" et basculer la classe "clicked" */