Animations CSS

📋 Syntaxe de base

/* 1. Définir l'animation */
@keyframes nomAnimation {
  from { /* début */ }
  to { /* fin */ }
}

/* 2. Appliquer l'animation */
.element {
  animation: nomAnimation duration timing-function;
}

---

🎯 Propriétés d’animation

Propriété	Valeurs	Exemple
animation-name	Nom de @keyframes	fadeIn
animation-duration	Temps	1s, 500ms
animation-timing-function	ease, linear, etc.	ease-in-out
animation-delay	Temps avant démarrage	0.5s
animation-iteration-count	Nombre ou infinite	3, infinite
animation-direction	normal, reverse, alternate	alternate
animation-fill-mode	forwards, backwards, both	forwards

Syntaxe courte :

animation: name duration timing-function delay iteration-count direction fill-mode;

---

⚡ Animations essentielles

Fade In

@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.fade-in {
  animation: fadeIn 0.6s ease forwards;
}

Fade Out

@keyframes fadeOut {
  to {
    opacity: 0;
    transform: translateY(-20px);
  }
}

.fade-out {
  animation: fadeOut 0.4s ease forwards;
}

Slide In (gauche)

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

.slide-in-left {
  animation: slideInLeft 0.5s ease forwards;
}

Bounce

@keyframes bounce {
  0%, 100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-20px);
  }
}

.bounce {
  animation: bounce 1s ease-in-out infinite;
}

Pulse

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

.pulse {
  animation: pulse 2s ease-in-out infinite;
}

Spin (rotation)

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

.spinner {
  animation: spin 1s linear infinite;
}

---

🎨 Pourcentages pour + de contrôle

@keyframes complexe {
  0% {
    transform: scale(1) rotate(0deg);
    opacity: 1;
  }
  25% {
    transform: scale(1.2) rotate(90deg);
  }
  50% {
    transform: scale(1) rotate(180deg);
    opacity: 0.5;
  }
  75% {
    transform: scale(1.2) rotate(270deg);
  }
  100% {
    transform: scale(1) rotate(360deg);
    opacity: 1;
  }
}

---

💡 Cas d’usage

Loading spinner

.spinner {
  width: 40px;
  height: 40px;
  border: 4px solid #f3f3f3;
  border-top: 4px solid var(--color-primary);
  border-radius: 50%;
  animation: spin 1s linear infinite;
}

Notification qui apparaît

.notification {
  animation: slideInRight 0.3s ease forwards;
}

@keyframes slideInRight {
  from {
    transform: translateX(100%);
    opacity: 0;
  }
  to {
    transform: translateX(0);
    opacity: 1;
  }
}

Texte qui pulse (attention)

.alert-text {
  animation: pulse 1.5s ease-in-out infinite;
}

Badge avec animation d’entrée

.badge {
  animation: bounceIn 0.6s cubic-bezier(0.68, -0.55, 0.265, 1.55);
}

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

---

⚙️ Animation + Direction

.element {
  animation: bounce 2s ease-in-out infinite alternate;
}

Direction	Comportement
normal	Lecture normale (défaut)
reverse	Lecture inversée
alternate	Alterne normal/reverse
alternate-reverse	Commence inversé puis alterne

---

🎯 Fill Mode

Contrôle l’état avant/après l’animation.

.element {
  animation: fadeIn 1s ease forwards;
}

Fill Mode	Comportement
none	Revient à l’état initial (défaut)
forwards	Garde l’état final
backwards	Applique le premier état avant le délai
both	Combine forwards et backwards

---

🔄 Délais progressifs

Pour animer plusieurs éléments :

.item:nth-child(1) { animation-delay: 0s; }
.item:nth-child(2) { animation-delay: 0.1s; }
.item:nth-child(3) { animation-delay: 0.2s; }
.item:nth-child(4) { animation-delay: 0.3s; }

/* Ou avec calc() */
.item {
  animation: fadeIn 0.5s ease forwards;
  animation-delay: calc(var(--i) * 0.1s);
}

---

⚠️ Bonnes pratiques

✅ À faire :

• Animations courtes (< 1s) pour l’interactivité
• ease ou ease-out pour la plupart des cas
• forwards pour garder l’état final
• Animations subtiles pour ne pas distraire

❌ À éviter :

• Animations trop longues ou trop rapides
• Trop d’animations simultanées
• Animations en boucle sur des éléments importants
• Animations qui empêchent la lecture du contenu

Accessibilité - prefers-reduced-motion

Respectez les préférences utilisateurs :

@media (prefers-reduced-motion: reduce) {
  * {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

Désactive les animations pour les utilisateurs sensibles au mouvement.

---

🧪 Testez rapidement

<div class="test-box">Animation!</div>

<style>
@keyframes bounceIn {
  0% {
    transform: scale(0) rotate(-180deg);
    opacity: 0;
  }
  50% {
    transform: scale(1.1) rotate(10deg);
  }
  100% {
    transform: scale(1) rotate(0);
    opacity: 1;
  }
}

.test-box {
  width: 150px;
  height: 150px;
  background: linear-gradient(135deg, #667eea, #764ba2);
  color: white;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 1rem;
  font-weight: bold;
  animation: bounceIn 0.6s cubic-bezier(0.68, -0.55, 0.265, 1.55);
}
</style>

---