Transitions CSS

📋 Référence rapide

.element {
  transition: property duration timing-function delay;
}

Propriété	Valeurs courantes	Exemple
property	all, background, transform, opacity	background-color
duration	0.3s, 500ms	0.3s
timing-function	ease, linear, ease-in, ease-out	ease
delay	0s, 0.2s	0s

---

🎯 Exemples essentiels

Transition simple

.button {
  background: #FF6B6B;
  transition: background 0.3s ease;
}

.button:hover {
  background: #E85555;
}

Multiples propriétés

.card {
  transform: translateY(0);
  box-shadow: 0 2px 4px rgba(0,0,0,0.1);
  transition: transform 0.3s, box-shadow 0.3s;
}

.card:hover {
  transform: translateY(-5px);
  box-shadow: 0 8px 16px rgba(0,0,0,0.2);
}

Toutes les propriétés

.element {
  transition: all 0.3s ease;
}

---

⚡ Timing Functions

Fonction	Comportement	Usage
ease	Démarre lent, accélère, ralentit	Défaut, le plus naturel
linear	Vitesse constante	Rotations, spinners
ease-in	Démarre lent	Sorties d’écran
ease-out	Ralentit à la fin	Entrées d’écran
ease-in-out	Lent au début et fin	Mouvements longs

Voir les courbes personnalisées

.custom {
  /* Bounce effect */
  transition: transform 0.5s cubic-bezier(0.68, -0.55, 0.265, 1.55);
}

Générateur : cubic-bezier.com

---

💡 Cas d’usage courants

Bouton au hover

.btn {
  background: var(--color-primary);
  transform: translateY(0);
  transition: all 0.2s ease;
}

.btn:hover {
  background: var(--color-primary-dark);
  transform: translateY(-2px);
}

Carte au hover

.card {
  transform: scale(1);
  box-shadow: 0 2px 8px rgba(0,0,0,0.1);
  transition: transform 0.3s, box-shadow 0.3s;
}

.card:hover {
  transform: scale(1.02);
  box-shadow: 0 8px 24px rgba(0,0,0,0.15);
}

Lien avec soulignement

.link {
  color: var(--color-text);
  border-bottom: 2px solid transparent;
  transition: border-color 0.2s, color 0.2s;
}

.link:hover {
  color: var(--color-primary);
  border-color: var(--color-primary);
}

---

⚠️ Bonnes pratiques

✅ À faire :

• Transitions courtes (0.2s - 0.4s)
• ease ou ease-out pour la plupart des cas
• Animer transform et opacity (performant)

❌ À éviter :

• Transitions trop longues (> 0.5s)
• transition: all si possible (moins performant)
• Animer width, height, top, left (préférez transform)

Pourquoi éviter width/height/top/left ?

Ces propriétés déclenchent un reflow (recalcul de la mise en page) = moins performant.

Préférez :

• transform: translateX() au lieu de left
• transform: scale() au lieu de width/height

/* ❌ Moins performant */
.element {
  left: 0;
  transition: left 0.3s;
}
.element:hover {
  left: 100px;
}

/* ✅ Plus performant */
.element {
  transform: translateX(0);
  transition: transform 0.3s;
}
.element:hover {
  transform: translateX(100px);
}

---

🧪 Testez rapidement

<button class="test-btn">Survolez-moi</button>

<style>
.test-btn {
  padding: 1rem 2rem;
  background: #FF6B6B;
  color: white;
  border: none;
  border-radius: 0.5rem;
  cursor: pointer;
  transition: all 0.3s ease;
}

.test-btn:hover {
  background: #E85555;
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0,0,0,0.2);
}
</style>