Animations CSS

Les animations CSS offrent un moyen sophistiqué d'améliorer l'expérience utilisateur grâce à des transitions et des effets fluides et visuellement attrayants. Dans ce guide complet, nous explorons les subtilités des animations CSS en fournissant des explications détaillées, des exemples et les bonnes pratiques pour créer des designs dynamiques et adaptatifs.

Introduction aux animations CSS

Les animations CSS permettent aux développeurs web d'animer des éléments HTML sans avoir recours à JavaScript. Elles sont définies à l'aide de keyframes, qui spécifient les styles à différents points de la séquence d'animation.

Exemple de base d'animation CSS

<div class="animated-box"></div>

<style>
  .animated-box {
    width: 100px;
    height: 100px;
    background-color: red;
    animation: move 4s infinite;
  }

  @keyframes move {
    0% { transform: translateX(0); }
    50% { transform: translateX(200px); }
    100% { transform: translateX(0); }
  }
</style>

Propriétés clés des animations CSS

• animation-name : Spécifie le nom des keyframes.
• animation-duration : Définit la durée de l'animation.
• animation-timing-function : Définit la courbe de vitesse de l'animation.
• animation-delay : Retarde le démarrage de l'animation.
• animation-iteration-count : Définit le nombre de fois que l'animation doit être jouée.
• animation-direction : Spécifie si l'animation doit se jouer en sens inverse lors des cycles alternés.

Appliquer plusieurs animations

Vous pouvez appliquer plusieurs animations à un seul élément en les séparant par des virgules.

<div class="multi-animated-box"></div>

<style>
  .multi-animated-box {
    width: 100px;
    height: 100px;
    background-color: blue;
    animation: move 4s infinite, rotate 2s infinite;
  }

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

  @keyframes rotate {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
  }
</style>

Techniques avancées

Animations adaptatives

Assurez-vous que les animations sont adaptatives et s'ajustent aux différentes tailles d'écran.

<div class="responsive-box"></div>

<style>
  .responsive-box {
    width: 50vw;
    height: 50vw;
    background-color: green;
    animation: resize 4s infinite;
  }

  @keyframes resize {
    0% { width: 50vw; height: 50vw; }
    50% { width: 70vw; height: 70vw; }
    100% { width: 50vw; height: 50vw; }
  }
</style>

Combiner des transformations

Combinez plusieurs propriétés de transformation pour créer des animations complexes.

<div class="complex-transform-box"></div>

<style>
  .complex-transform-box {
    width: 100px;
    height: 100px;
    background-color: yellow;
    animation: complexTransform 5s infinite;
  }

  @keyframes complexTransform {
    0% {
      transform: translateX(0) rotate(0deg) scale(1);
    }
    50% {
      transform: translateX(200px) rotate(180deg) scale(1.5);
    }
    100% {
      transform: translateX(0) rotate(360deg) scale(1);
    }
  }
</style>

Modes de remplissage des animations

La propriété animation-fill-mode définit comment une animation CSS applique des styles à son élément cible avant et après son exécution.

<div class="fill-mode-box"></div>

<style>
  .fill-mode-box {
    width: 100px;
    height: 100px;
    background-color: purple;
    animation: fillMode 3s forwards;
  }

  @keyframes fillMode {
    0% { background-color: purple; }
    100% { background-color: orange; }
  }
</style>

Délais et fonctions de timing des animations

Utilisez des délais et des fonctions de timing pour contrôler le rythme et le démarrage des animations.

<div class="timing-function-box"></div>

<style>
  .timing-function-box {
    width: 100px;
    height: 100px;
    background-color: pink;
    animation: timingFunction 4s ease-in-out infinite;
  }

  @keyframes timingFunction {
    0% { transform: translateY(0); }
    50% { transform: translateY(200px); }
    100% { transform: translateY(0); }
  }
</style>

Bonnes pratiques pour les animations CSS

1. Minimiser l'utilisation du CPU : Gardez les animations simples pour éviter une consommation excessive du CPU, qui peut dégrader les performances, notamment sur les appareils mobiles.
2. Utiliser l'accélération matérielle : Utilisez les propriétés transform et opacity pour exploiter l'accélération GPU.
3. Alternatives de secours : Fournissez des styles de remplacement pour les navigateurs qui ne prennent pas en charge les animations.
4. Tests de performance : Testez les animations sur différents appareils et navigateurs pour garantir des performances fluides.

Exemple d'animation bien optimisée

<div class="optimized-box"></div>

<style>
  .optimized-box {
    width: 100px;
    height: 100px;
    background-color: cyan;
    animation: optimizedMove 3s ease-in-out infinite;
  }

  @keyframes optimizedMove {
    0% { transform: translateY(0) scale(1); }
    50% { transform: translateY(200px) scale(1.2); }
    100% { transform: translateY(0) scale(1); }
  }
</style>

Contrôler les animations CSS depuis JavaScript

CSS gère le rendu d'une animation de manière efficace, mais il ne sait pas quand une animation doit s'exécuter ni ce qui doit se passer après qu'elle se termine. Cette logique de décision appartient à JavaScript. Le modèle le plus courant est : définir l'animation en CSS, puis laisser JavaScript ajouter ou supprimer une classe pour la démarrer ou l'arrêter.

Cela maintient la lecture fluide et accélérée par le GPU dans CSS, tandis que votre code garde le contrôle du timing et des actions de suivi.

Démarrer et arrêter avec une bascule de classe

Placez l'animation sur une classe plutôt que sur le sélecteur de base, puis basculez cette classe :

<button id="play">Play</button>
<div id="box"></div>

<style>
  #box {
    width: 100px;
    height: 100px;
    background: teal;
  }
  /* The animation only runs while this class is present */
  #box.run {
    animation: slide 1s ease-in-out;
  }
  @keyframes slide {
    from { transform: translateX(0); }
    to   { transform: translateX(200px); }
  }
</style>

<script>
  const box = document.getElementById('box');
  document.getElementById('play').onclick = () => {
    // Toggle: add the class to play, the CSS animation does the rest
    box.classList.add('run');
  };
</script>

Puisque l'animation est attachée à la classe .run, supprimer cette classe l'arrête instantanément et la rétablir la rejoue depuis le début.

Écouter la fin : transitionend et animationend

Le principal avantage de piloter les animations depuis JavaScript est que le navigateur déclenche des événements DOM auxquels vous pouvez réagir. Cela vous permet d'enchaîner des étapes, de nettoyer des classes ou d'exécuter du code exactement quand un effet se termine — sans estimation fragile avec setTimeout.

• Pour les transitions CSS, l'événement transitionend se déclenche quand une transition se termine.
• Pour les animations CSS (@keyframes), trois événements se déclenchent : animationstart, animationiteration (une fois par boucle), et animationend.

<button id="fade">Fade out</button>
<div id="panel">Hello</div>

<style>
  #panel {
    width: 150px;
    padding: 20px;
    background: gold;
    transition: opacity 0.5s;
  }
  #panel.hidden { opacity: 0; }
</style>

<script>
  const panel = document.getElementById('panel');

  document.getElementById('fade').onclick = () => panel.classList.add('hidden');

  // Runs the moment the fade completes — not a guessed delay
  panel.addEventListener('transitionend', (event) => {
    console.log(`Transition of "${event.propertyName}" finished`);
    panel.style.display = 'none'; // safe to hide only now
  });
</script>

Lorsque la transition se termine, la console affiche :

Transition of "opacity" finished

Lire les détails des événements : propertyName et animationName

Les événements d'animation transportent des données utiles. Lorsque plusieurs propriétés ou animations sont impliquées, vous avez souvent besoin de savoir laquelle vient de se terminer.

• event.propertyName — la propriété CSS qui a effectué la transition (sur transitionend).
• event.animationName — le nom des @keyframes (sur les trois événements d'animation).
• event.elapsedTime — les secondes de temps d'exécution, hors tout animation-delay.

<div id="bouncer">Watch the console</div>

<style>
  #bouncer { animation: bounce 0.6s ease 3; }
  @keyframes bounce {
    0%, 100% { transform: translateY(0); }
    50%      { transform: translateY(-30px); }
  }
</style>

<script>
  const el = document.getElementById('bouncer');

  el.addEventListener('animationstart', (e) =>
    console.log(`start: ${e.animationName}`));

  el.addEventListener('animationiteration', (e) =>
    console.log(`loop of ${e.animationName} at ${e.elapsedTime}s`));

  el.addEventListener('animationend', (e) =>
    console.log(`end: ${e.animationName} (total ${e.elapsedTime}s)`));
</script>

Avec animation: bounce 0.6s ease 3 (trois itérations), la console affiche start, deux événements animationiteration (début des boucles 2 et 3), puis end à 1.8s au total.

Piloté par JS ou par CSS : que choisir ?

Un hybride pratique tire le meilleur des deux : CSS décrit l'effet, JavaScript décide quand il s'exécute et ce qui se passe ensuite via les événements ci-dessus. Lorsque vous avez réellement besoin d'un contrôle image par image, tournez-vous vers les animations JavaScript avec requestAnimationFrame, ou vers la Web Animations API pour construire et contrôler des animations entièrement en code.

Conclusion

Les animations CSS sont un outil puissant pour créer des expériences web dynamiques et engageantes. En maîtrisant les keyframes, les propriétés d'animation et les techniques avancées, les développeurs peuvent produire des animations de qualité professionnelle qui améliorent l'interaction utilisateur. Expérimentez avec différentes animations, testez-les en profondeur et respectez les bonnes pratiques pour obtenir les meilleurs résultats.

Pratique