Les animations CSS et JavaScript

Exemples Vous pouvez télécharger les exemples ici

Retour sur les animations CSS

Les animations CSS permettent de créer des effets visuels sans avoir à écrire du JavaScript pour chaque image, élément ou texte animé. Voici les principaux concepts à connaître :

• @keyframes : Définit les étapes de l'animation. Elle permet de spécifier à quelles valeurs les propriétés CSS doivent évoluer au fil du temps.

  @keyframes slide {
    0% { 
      transform: translateX(0); 
    }
    100% { 
      transform: translateX(200px);
    }
  }

Propriétés d'animation CSS :

• animation-name : Nom de l'animation (doit correspondre à la règle @keyframes).
• animation-duration : Durée de l'animation (en s ou ms).
• animation-timing-function : Courbe de progression (linear, ease, etc.).
• animation-delay : Retard avant le début de l'animation.
• animation-iteration-count : Nombre de fois que l'animation doit se répéter (infinite pour une boucle).

Exemple

.boite {
  animation-name: slide;
  animation-duration: 2s;
  animation-timing-function: ease-in-out;
}

Combiner JavaScript et CSS

L'utilisation conjointe de JavaScript et CSS permet de contrôler les animations dynamiquement, par exemple en les démarrant ou en les arrêtant selon les événements utilisateur (clics, survols, etc.).

Ajouter/Retirer des classes CSS avec JavaScript

La manière la plus simple de déclencher des animations est de manipuler les classes CSS avec JavaScript. Utilisez classList.add() et classList.remove() pour appliquer les classes qui contiennent vos animations.

Exemple

<button id="btnDemarrer">Démarrer l'animation</button>
<div class="boite" id="boite-animee"></div>

<style>
.boite {
  width: 100px;
  height: 100px;
  background-color: red;
  transition: transform 1s ease; /* Définit une transition */
}
  
.anim-droite {
  transform: translateX(200px); /* La classe à ajouter */
}
</style>
  
<script>
  document.getElementById('btnDemarrer').addEventListener('click', function() {
  document.getElementById('boite-animee').classList.toggle('anim-droite');
});
</script>

Explication

• Lorsqu'on clique sur le btnDemarrer, la classe anim-droite est ajoutée/retirée, ce qui déclenche la transition définie sur l'élément .boite.

Détecter les événements d'animation

CSS et JavaScript permettent de réagir aux étapes d'animation à l'aide des événements suivants :

• animationstart : Déclenché au début de l'animation.
• animationend : Déclenché à la fin de l'animation.
• animationiteration : Déclenché à chaque nouvelle itération de l'animation.

Exemple

<div class="boite" id="boite-animee"></div>
  
<style>
@keyframes anim-couleur {
  0% { 
    background-color: red; 
  }
  50% { 
    background-color: yellow; 
  }
  100% { 
    background-color: green; 
  }
}
.boite {
  width: 100px;
  height: 100px;
  animation: anim-couleur 2s infinite;
}
</style>
  
<script>
const boite = document.getElementById('boite-animee');

boite.addEventListener('animationstart', () => {
  console.log('Animation commencée');
});

boite.addEventListener('animationend', () => {
  console.log('Animation terminée');
});

boite.addEventListener('animationiteration', () => {
  console.log('Nouvelle itération de l\'animation');
});
</script>

Combiner des animations CSS et des événements

Une utilisation typique consiste à démarrer une animation lorsque l'utilisateur interagit avec la page, par exemple en survolant un élément.

Exemple : animation au survol

<div class="boite" id="boite-survol"></div>
  
<style>
.boite {
  width: 100px;
  height: 100px;
  background-color: blue;
  transition: transform 0.5s;
}

.anim-scale {
  transform: scale(1.5);
}
</style>

<script>
const boite = document.getElementById('boite-survol');

// Ajoute la classe `anim-scale` au survol
boite.addEventListener('mouseover', () => {
  boite.classList.add('anim-scale');
});

// Retire la classe `anim-scale` lorsque le curseur quitte la boîte
boite.addEventListener('mouseout', () => {
  boite.classList.remove('anim-scale');
});
</script>

Animation avancée avec requestAnimationFrame

Pour des animations très spécifiques ou des contrôles fins, vous pouvez utiliser requestAnimationFrame() en JavaScript, ce qui permet de créer des animations qui ne dépendent pas uniquement des transitions CSS.

Exemple de rotation

<div class="boite" id="tournerBoite"></div>
  
<style>
.boite {
  width: 100px;
  height: 100px;
  background-color: purple;
  margin: 20px auto;
}
</style>

<script>
let rotation = 0;
const boite = document.getElementById('tournerBoite');

function tournerBoite() {
  rotation += 1; // Incrémente la rotation
  boite.style.transform = `rotate(${rotation}deg)`;
  requestAnimationFrame(tournerBoite);
}

tournerBoite(); // Démarre l'animation
</script>
  

Résumé

• Utilisez les classes CSS pour les animations simples déclenchées par JavaScript.
• Utilisez les événements d'animation (animationstart, animationend) pour synchroniser d'autres actions.
• Manipulez les propriétés CSS via JavaScript (style.transform, style.opacity, etc.) pour plus de contrôle.
• Utilisez requestAnimationFrame() pour des animations JS fluides et précises.