Chapitre 11 : Transitions et animations

1. Les transitions CSS

Les transitions permettent d'animer les changements de valeurs d'une propriété CSS (ex : couleur, taille, opacité…).

Syntaxe de base :

.bouton {
  transition: background-color 0.3s ease;
}

Exemple avec :hover :

.bouton {
  background-color: blue;
  transition: background-color 0.3s ease;
}

.bouton:hover {
  background-color: darkblue;
}

Tu peux aussi animer plusieurs propriétés :

transition: all 0.5s ease-in-out;

2. Les animations CSS (keyframes)

Les animations CSS permettent de créer des effets plus complexes et personnalisés à l’aide de @keyframes.

Exemple simple :

@keyframes slide {
  from {
    transform: translateX(-100%);
  }
  to {
    transform: translateX(0);
  }
}

.boite {
  animation: slide 0.5s ease-out;
}

L'animation peut boucler ou alterner :

animation: slide 1s infinite alternate;

3. Propriétés d’une animation

• animation-name : nom des keyframes
• animation-duration : durée de l’animation
• animation-delay : délai avant démarrage
• animation-iteration-count : nombre de répétitions
• animation-direction : normal, reverse, alternate…
• animation-fill-mode : comportement avant/après animation

4. Exemple complet

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

.button {
  background: #007BFF;
  color: white;
  padding: 10px 20px;
  border: none;
  animation: pulse 2s infinite;
}
</style>

<button class="button">Clique moi</button>