Module CSS.7 – Animations & transitions

Objectif

Maîtriser les animations CSS : transitions, transforms, keyframes pour créer des interfaces dynamiques et performantes.

Théorie

Transitions

Transition = Animation entre deux états.

Syntaxe :

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

Exemple :

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

.button:hover {
    background-color: red;
}

Propriétés :

• transition-property : Quelle propriété animer
• transition-duration : Durée (s ou ms)
• transition-timing-function : Courbe d'animation
• transition-delay : Délai avant l'animation

Shorthand :

transition: all 0.3s ease 0.1s;
transition: background-color 0.3s, transform 0.5s;

Timing functions :

transition-timing-function: ease;        /* Défaut */
transition-timing-function: linear;      /* Linéaire */
transition-timing-function: ease-in;     /* Lent au début */
transition-timing-function: ease-out;    /* Lent à la fin */
transition-timing-function: ease-in-out; /* Lent début et fin */
transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); /* Personnalisé */

Transform

Transform = Transforme un élément (rotation, scale, translation).

Transformations :

transform: translateX(50px);  /* Déplacer horizontalement */
transform: translateY(50px);   /* Déplacer verticalement */
transform: translate(50px, 50px); /* Déplacer X et Y */
transform: scale(1.5);        /* Agrandir (1.5×) */
transform: scaleX(2);         /* Agrandir horizontalement */
transform: scaleY(0.5);       /* Rétrécir verticalement */
transform: rotate(45deg);     /* Tourner 45° */
transform: skew(10deg, 5deg); /* Incliner */

Combinaisons :

transform: translate(50px, 50px) rotate(45deg) scale(1.2);

Transform-origin :

transform-origin: center;      /* Centre (défaut) */
transform-origin: top left;    /* Coin supérieur gauche */
transform-origin: 50% 50%;     /* Centre */
transform-origin: 0 0;         /* Coin supérieur gauche */

Animations (keyframes)

Keyframes = Définir les étapes d'une animation.

Définir l'animation :

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

@keyframes fadeIn {
    0% {
        opacity: 0;
    }
    50% {
        opacity: 0.5;
    }
    100% {
        opacity: 1;
    }
}

Appliquer l'animation :

.element {
    animation: slideIn 0.5s ease;
}

Propriétés d'animation :

animation-name: slideIn;
animation-duration: 0.5s;
animation-timing-function: ease;
animation-delay: 0.2s;
animation-iteration-count: 1;      /* Nombre de répétitions */
animation-iteration-count: infinite; /* Infini */
animation-direction: normal;        /* Normal */
animation-direction: reverse;       /* Inverse */
animation-direction: alternate;     /* Alterné */
animation-fill-mode: none;          /* Pas de style avant/après */
animation-fill-mode: forwards;      /* Garde le style final */
animation-fill-mode: backwards;     /* Applique le style initial */
animation-fill-mode: both;          /* Forwards + backwards */
animation-play-state: running;      /* En cours */
animation-play-state: paused;       /* En pause */

Shorthand :

animation: slideIn 0.5s ease 0.2s 3 alternate forwards;
/* name duration timing delay count direction fill-mode */

Performances animations

Propriétés performantes (GPU) :

• ✅ transform (translate, scale, rotate)
• ✅ opacity
• ✅ filter (moderne)

Propriétés non performantes (CPU) :

• ❌ width, height
• ❌ top, left, right, bottom
• ❌ margin, padding
• ❌ background-color (dans certains cas)

Optimisation :

/* ✅ Bon : Utilise GPU */
.element {
    transform: translateX(100px);
    will-change: transform; /* Hint pour le navigateur */
}

/* ❌ Mauvais : Utilise CPU */
.element {
    left: 100px;
}

will-change :

.element {
    will-change: transform; /* Prépare le navigateur */
}

Attention : Utiliser will-change avec parcimonie, seulement quand nécessaire.

Exemples d'animations courantes

Fade in :

@keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

.element {
    animation: fadeIn 0.5s ease;
}

Slide in :

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

Bounce :

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

.button:hover {
    animation: bounce 0.5s;
}

Spin :

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

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

Exercices guidés

Exercice 1 : Transitions de base

Créez des boutons avec :

• Transition de couleur au hover
• Transition de transform (scale)
• Durées et timing functions variés

Exercice 2 : Transform

Créez des éléments avec :

• translate pour déplacer
• scale pour agrandir
• rotate pour tourner
• Combinaisons de transforms

Exercice 3 : Keyframes

Créez des animations avec :

• Fade in
• Slide in
• Bounce
• Spin

Exercice 4 : Performance

Comparez :

• Animation avec transform (performant)
• Animation avec left (non performant)
• Utilisez DevTools Performance

Exercice 5 : Animations complexes

Créez :

• Menu qui slide in
• Cards qui apparaissent en cascade
• Loader animé
• Hover effects avancés

❌ Erreurs fréquentes

Erreur 1 : Animer des propriétés non performantes

❌ Mauvais :

.element {
    left: 0;
    transition: left 0.3s;
}
.element:hover {
    left: 100px; /* Repaint, non performant */
}

✅ Bon :

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

Pourquoi : transform utilise le GPU, plus performant.

Erreur 2 : Animations trop longues

❌ Mauvais :

animation: slideIn 5s; /* Trop long */

✅ Bon :

animation: slideIn 0.3s; /* Rapide */

Pourquoi : Animations rapides = meilleure UX.

Erreur 3 : Oublier will-change

❌ Mauvais :

.element {
    animation: complexAnimation 1s;
}

✅ Bon :

.element {
    will-change: transform;
    animation: complexAnimation 1s;
}

Pourquoi : will-change prépare le navigateur.

Erreur 4 : Trop d'animations

❌ Mauvais :

/* Tout bouge en même temps */

✅ Bon :

/* Animations subtiles et ciblées */

Pourquoi : Trop d'animations = distraction.

Erreur 5 : Pas de fallback

❌ Mauvais :

/* Animation seulement, pas d'état de base */

✅ Bon :

.element {
    opacity: 1; /* État de base */
}
.element.animate {
    animation: fadeIn 0.5s;
}

Pourquoi : Si l'animation ne charge pas, l'élément reste visible.

🚀 Mini-projet

Mission : Créer des animations professionnelles

Créez une page avec :

Transitions :

• Boutons avec hover effects
• Cards avec transitions
• Menu avec slide

Animations :

• Fade in au chargement
• Slide in pour les sections
• Loader animé
• Micro-interactions

Performance :

• Utiliser transform et opacity
• will-change où approprié
• Animations fluides (60fps)

Critères :

• ✅ Transitions fluides
• ✅ Animations performantes
• ✅ Timing approprié
• ✅ Pas d'animations excessives
• ✅ Fallbacks

Objectif : Créer des animations professionnelles et performantes.

---

Validation : Vous pouvez passer au module suivant quand vous maîtrisez les transitions, transforms, keyframes et créez des animations performantes.