FrontEndAscend

Animations et Transitions en CSS : Différence et Combinaison

En CSS, les animations et les transitions sont deux techniques essentielles pour dynamiser les interactions sur une page web. Bien qu’elles puissent paraître similaires, elles ont des différences fondamentales dans leur fonctionnement et leur utilisation. Dans cet article, nous allons examiner ces différences, apprendre à les combiner et voir quelques exemples pratiques comme les effets hover et like.

1. Qu’est-ce qu’une Transition en CSS ?

Les transitions permettent de rendre les changements de style plus fluides. Elles sont déclenchées par des événements tels qu'un survol (hover), un clic, ou un changement de propriété CSS. Elles permettent de définir la durée et la manière dont une propriété CSS passe d'un état à un autre.

Exemple de transition avec un effet hover :

.button {
  background-color: #3498db;
  color: white;
  padding: 10px 20px;
  border: none;
  cursor: pointer;
  transition: background-color 0.3s ease;
}

.button:hover {
  background-color: #2ecc71;
}

• transition : Indique la propriété que l’on souhaite animer (ici, background-color), la durée de la transition (0.3s), et la fonction de timing (ease).
• Résultat : Lorsqu'on survole le bouton avec la souris, sa couleur de fond change progressivement du bleu au vert en 0,3 secondes.

2. Qu’est-ce qu’une Animation en CSS ?

Les animations CSS offrent plus de contrôle que les transitions. Elles permettent de définir plusieurs étapes (keyframes) d'une animation et d'enchaîner différents styles au cours du temps, sans nécessiter un déclencheur comme hover. Vous pouvez ainsi créer des effets continus et plus complexes.

Exemple d'animation avec des keyframes :

@keyframes bounce {
  0%,
  100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-20px);
  }
}
.like-icon {
  font-size: 30px;
  animation: bounce 1s infinite;
}

• @keyframes : Définit les étapes de l'animation. Ici, nous faisons "rebondir" l’icône en la déplaçant de haut en bas.
• animation : Applique l’animation bounce à l’élément sur une durée de 1 seconde, et la répète à l’infini.
• Résultat : L'icône like fait un mouvement de rebond constant, créant un effet dynamique.

3. Transition vs Animation : Les Différences Clés.

• Transition : Nécessite un changement d'état déclenché par une interaction (ex. : hover, focus, active). Limité à une transition simple entre deux états.
• Animation : Plus flexible, peut se dérouler automatiquement en boucles ou sur une durée spécifique, et inclut plusieurs étapes avec les @keyframes.

4. Combiner Animation et Transition : Exemples Pratiques

Il est possible de combiner transitions et animations pour des effets plus sophistiqués. Par exemple, nous allons créer un bouton avec une animation "pulse" en continu et un effet de changement de couleur au survol.

Exemple combiné (Effet pulse + hover sur un bouton) :

@keyframes pulse {
  0%,
  100% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.1);
  }
}

.pulse-button {
  background-color: #e74c3c;
  color: white;
  padding: 15px 30px;
  border: none;
  cursor: pointer;
  animation: pulse 2s infinite;
  transition: background-color 0.3s ease;
}

.pulse-button:hover {
  background-color: #c0392b;
}

• Animation : L'effet pulse agrandit légèrement le bouton de manière répétée.
• Transition : Lorsque l’utilisateur survole le bouton, la couleur de fond change doucement grâce à la transition définie sur la propriété background-color.

5. Application Pratique : Bouton "Like" Animé

Voici un exemple complet pour un bouton "Like", qui combine une animation et une transition. Lorsque vous cliquez sur le bouton, il s'anime brièvement pour attirer l’attention, tout en changeant de couleur.

@keyframes pop {
  0% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.3);
  }
  100% {
    transform: scale(1);
  }
}

.like-button {
  font-size: 30px;
  color: #95a5a6;
  cursor: pointer;
  transition: color 0.3s ease;
}

.like-button.liked {
  color: #e74c3c;
  animation: pop 0.5s;
}

• Animation pop : Lorsqu'on clique sur le bouton, l'animation agrandit temporairement l’icône pour créer un effet de "pop".
• Transition color : Le bouton change de couleur pour indiquer qu'il a été aimé, avec une transition fluide.

JavaScript pour activer l'effet "Like" :

const likeButton = document.querySelector(".like-button");

likeButton.addEventListener("click", () => {
  likeButton.classList.toggle("liked");
});

• JavaScript : Le bouton like change de classe (liked) lorsqu'il est cliqué, activant ainsi l'animation et la transition définie en CSS.

Conclusion

Les animations et les transitions en CSS sont des outils puissants pour enrichir l'expérience utilisateur sur vos sites web. Les transitions sont idéales pour des changements de style simples et réactifs, tandis que les animations permettent de créer des effets plus élaborés avec des keyframes. En les combinant, vous pouvez créer des interactions visuellement engageantes, comme des boutons "Like" animés ou des effets hover interactifs.

Expérimentez avec ces deux techniques et ajustez-les à vos besoins pour créer des interfaces plus dynamiques et captivantes.