Retour
Module 1 : Introduction à CSS
1.1 — Lier CSS à HTML Aperçu
🛠️ Projet 1 — Première mise en forme
Module 2 : Sélecteurs CSS
2.1 — Tous les types de sélecteurs Aperçu
🛠️ Projet 2 — Ciblage précis
Module 3 : Couleurs, fonds et dégradés
3.1 — Maîtriser les couleurs CSS Aperçu
🛠️ Projet 3 — Hero section
Module 4 : Typographie web
4.1 — Polices et texte Aperçu
🛠️ Projet 4 — Article typographié
Module 5 : Box Model — Le modèle de boîte
5.1 — Comprendre le Box Model Aperçu
🛠️ Projet 5 — Cartes produit
Module 6 : Display et positionnement
6.1 — Display : le comportement des boîtes Aperçu
🛠️ Projet 6 — Layout avec position
Module 7 : Flexbox — Layout flexible
7.1 — Flexbox fondamental Aperçu
🛠️ Projet 7 — Page centrée
Module 8 : Flexbox avancé
8.1 — Contrôler les enfants flex Aperçu
🛠️ Projet 8 — Layout 3 colonnes
Module 9 : CSS Grid — Layout en grille
9.1 — Grid fondamental Aperçu
🛠️ Projet 9 — Dashboard Grid
Module 10 : CSS Grid avancé
10.1 — Grid Areas et responsive Aperçu
🛠️ Projet 10 — Galerie auto-responsive
Module 11 : Responsive Design — Media Queries
11.1 — @media et breakpoints Aperçu
🛠️ Projet 11 — Site responsive
Module 12 : Mobile First — Approche pratique
12.1 — Techniques Mobile First Aperçu
🛠️ Projet 12 — Menu hamburger
Module 13 : Transitions et animations CSS
13.1 — Transitions et keyframes Aperçu
🛠️ Projet 13 — Page animée
Module 14 : Pseudo-classes et pseudo-éléments
14.1 — Pseudo-classes et pseudo-éléments Aperçu
🛠️ Projet 14 — Tableau stylé
Module 15 : Variables CSS et organisation
15.1 — CSS propre et scalable Aperçu
🛠️ Projet 15 — Design system
Module 16 : Projet final — Site responsive complet
16.1 — Site responsive professionnel Aperçu

Le reste de la formation est réservé aux inscrits.

S'inscrire gratuitement
Module 13 : Transitions et animations CSS Aperçu gratuit

13.1 — Transitions et keyframes

📋 Objectifs d'apprentissage

  • Créer des transitions fluides avec transition
  • Définir des animations avec @keyframes
  • Utiliser animation et ses sous-propriétés
  • Optimiser les performances (transform, opacity)
✨ Transitions et animations CSS transition: property duration timing-function delay; @keyframes slideIn { from { transform: translateX(-100%); } to { transform: translateX(0); } }

Transition : animation entre deux états

.btn {
  background: #3498db;
  transition: background 0.3s ease, transform 0.2s;
}
.btn:hover {
  background: #2980b9;
  transform: scale(1.05);  /* Grossit de 5% */
}

@keyframes : animations complexes

@keyframes pulse {
  0%, 100% { transform: scale(1); }
  50%      { transform: scale(1.1); }
}
.btn { animation: pulse 2s infinite; }

⚠️ Performance

N'animez QUE transform et opacity. Ces propriétés sont accélérées par le GPU (60 fps). Évitez width, height, left, top qui déclenchent des recalculs de layout.

Ceci est un aperçu gratuit.
Voir la formation complète