📘 Chapitre 7 – Transitions et animations simples

1. 🎯 Objectif pédagogique

Savoir utiliser les transitions et animations CSS pour améliorer l’interactivité et l’expérience utilisateur d’une page web.

2. 📚 Concepts abordés

Propriété transition (durée, timing, propriétés ciblées)
Effets de survol (:hover)
Introduction aux @keyframes pour créer des animations simples
Différences entre transition et animation

3. 🧠 Explication théorique

Une transition permet de créer un effet fluide lorsqu’une propriété CSS change d’état, par exemple au survol d’un bouton.

button {
  background-color: #3498db;
  transition: background-color 0.5s ease;
}

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

Une animation (via @keyframes) permet de modifier progressivement un élément sur une durée définie, même sans interaction.

@keyframes rotation {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

.animated {
  animation: rotation 2s linear infinite;
}

4. 🛠 Tutoriel pratique

Résumé du travail : Créer un bouton avec une transition de couleur au survol et une boîte qui tourne grâce à une animation.

Arborescence du projet :

mon_projet/
├── index.html
└── style.css

Étape 1 : HTML

<!DOCTYPE html>
<html lang="fr">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Transitions et Animations</title>
    <link rel="stylesheet" href="style.css">
  </head>
  <body>
    <button>Survoler</button>
    <div class="box"></div>
  </body>
</html>

Étape 2 : CSS

body {
  font-family: Arial, sans-serif;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 20px;
  padding: 50px;
}

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

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

/* Animation */
.box {
  width: 80px;
  height: 80px;
  background-color: #e74c3c;
  animation: rotation 3s linear infinite;
}

@keyframes rotation {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

5. 🧾 Résumé et points-clés

Transitions = changement fluide d’une propriété sur un événement (survol, clic…).
Animations = séquences d’étapes définies avec @keyframes.
Le choix de ease, linear, ou ease-in-out modifie la perception du mouvement.