Animations et transitions · Cours CSS

Les transitions

Une transition anime le changement d'une propriété CSS. Au lieu d'un changement instantané, l'élément « glisse » vers sa nouvelle valeur :

Prédisez avant de lire

Avant de dérouler : on veut faire apparaître un menu en fondu avec transition: all 0.3s en passant de display: none à display: block. La transition va-t-elle vraiment produire un fondu progressif ? Pourquoi ? Quelle propriété faut-il animer à la place ?

Voir la réponse

Non, il n'y a aucun fondu : le menu apparaît d'un coup. La propriété display n'est pas animable : elle change par paliers (none / block), sans valeurs intermédiaires à interpoler, donc une transition ne peut rien lisser. Les transitions ne fonctionnent que sur des propriétés à valeurs continues : opacity, transform, color, les dimensions, etc. Pour un fondu, on anime l'opacity (de 0 à 1), souvent combinée à visibility ou à un léger transform. Astuce moderne : transition-behavior: allow-discrete permet d'animer certaines propriétés discrètes comme display, mais le réflexe de base reste d'animer opacity.

transition: propriété durée timing-function;

Exemple : transition: background-color 0.3s ease; : la couleur de fond change en 0.3 seconde avec une accélération douce.

Fonctions de timing courantes :

ease : démarrage lent, accélération, ralentissement (par défaut)
ease-in : démarrage lent
ease-out : fin lente
linear : vitesse constante

Transform

transform permet de modifier la position, la taille et la rotation d'un élément sans affecter le flux :

translate(10px, 20px) : déplace l'élément
rotate(45deg) : tourne l'élément
scale(1.1) : agrandit de 10%
skew(5deg) : incline l'élément

On combine souvent transform et transition pour des effets au survol (hover).

@keyframes : animations complexes

Les transitions animent entre deux états (A vers B). Pour des animations plus complexes, on utilise @keyframes :

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

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

Propriétés d'animation : animation-name, animation-duration, animation-timing-function, animation-iteration-count (infinite pour boucler).

Accessibilité : prefers-reduced-motion

Certains utilisateurs sont sensibles aux animations (troubles vestibulaires, épilepsie). Le paramètre prefers-reduced-motion détecte leurs préférences système :

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

Règle d'or : Ajoutez TOUJOURS cette media query quand vous utilisez des animations. C'est une question de santé, pas juste de préférence.

Pour aller plus loin

Le CSS est un langage vaste qui évolue rapidement. Voici des sujets avancés à explorer :

Variables CSS (custom properties) : --primary: #2563eb; et color: var(--primary);
@container queries : responsive basé sur le conteneur parent, pas le viewport
:has() selector : sélectionner un parent selon ses enfants
CSS nesting : imbriquer les sélecteurs comme en Sass, nativement
W3Schools CSS Reference
MDN CSS Reference

Conclusion

La façade est construite. Votre bâtiment a maintenant une structure solide (HTML) et une apparence soignée (CSS). Mais il est encore statique : comme une maquette.

Le JavaScript va lui donner vie : interactivité, animations dynamiques, communication avec des serveurs. C'est l'électricité et la plomberie de votre bâtiment.

Transitions

A transition animates the change of a CSS property. Instead of an instant change, the element "slides" to its new value:

Predict before reading

Before you scroll down: you want to fade in a menu using transition: all 0.3s by switching from display: none to display: block. Will the transition actually produce a smooth fade? Why? What should you animate instead?

See the answer

No, there is no fade at all: the menu appears instantly. The display property is not animatable: it switches in steps (none / block), with no intermediate values to interpolate, so a transition cannot smooth anything. Transitions only work on properties with continuous values: opacity, transform, color, dimensions, etc. For a fade, animate opacity (from 0 to 1), often combined with visibility or a slight transform. Modern tip: transition-behavior: allow-discrete now lets you animate some discrete properties like display, but the base reflex remains: animate opacity, not display.

transition: property duration timing-function;

Example: transition: background-color 0.3s ease; — background color changes over 0.3 seconds with smooth acceleration.

Common timing functions:

ease — slow start, accelerate, slow end (default)
ease-in — slow start
ease-out — slow end
linear — constant speed

Transform

transform modifies the position, size and rotation of an element without affecting the flow:

translate(10px, 20px) — moves the element
rotate(45deg) — rotates the element
scale(1.1) — enlarges by 10%
skew(5deg) — tilts the element

transform and transition are often combined for hover effects.

@keyframes: complex animations

Transitions animate between two states (A to B). For more complex animations, use @keyframes:

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

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

Animation properties: animation-name, animation-duration, animation-timing-function, animation-iteration-count (infinite to loop).

Accessibility: prefers-reduced-motion

Some users are sensitive to animations (vestibular disorders, epilepsy). The prefers-reduced-motion setting detects their system preferences:

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

Golden rule: ALWAYS add this media query when you use animations. It's a health concern, not just a preference.

Going further

CSS is a vast and rapidly evolving language. Here are advanced topics to explore:

CSS Variables (custom properties) — --primary: #2563eb; and color: var(--primary);
@container queries — responsive based on parent container, not viewport
:has() selector — select a parent based on its children
CSS nesting — nest selectors like Sass, natively
W3Schools CSS Reference
MDN CSS Reference

Conclusion

The facade is built. Your building now has a solid structure (HTML) and a polished appearance (CSS). But it's still static — like a scale model.

JavaScript will bring it to life: interactivity, dynamic animations, server communication. It's the electricity and plumbing of your building.

Essayez vous-même

/* Bouton avec transition au hover */
  .btn {
    background: #2563eb;
    color: white;
    border: none;
    padding: 12px 24px;
    border-radius: 6px;
    font-size: 16px;
    cursor: pointer;
    transition: background 0.3s ease, transform 0.2s ease;
  }
  .btn:hover {
    background: #1d4ed8;
    transform: translateY(-2px);
  }

/* Card avec animation d'entrée */
  @keyframes fadeSlideIn {
    from {
      opacity: 0;
      transform: translateY(20px);
    }
    to {
      opacity: 1;
      transform: translateY(0);
    }
  }

.card {
    background: white;
    border: 1px solid #e5e7eb;
    border-radius: 8px;
    padding: 20px;
    margin: 16px 0;
    animation: fadeSlideIn 0.6s ease forwards;
    transition: box-shadow 0.3s ease;
  }
  .card:nth-child(2) { animation-delay: 0.2s; opacity: 0; }
  .card:nth-child(3) { animation-delay: 0.4s; opacity: 0; }

.card:hover {
    box-shadow: 0 4px 12px rgba(0,0,0,0.15);
  }

/* Accessibilité */
  @media (prefers-reduced-motion: reduce) {
    * {
      animation-duration: 0.01ms !important;
      transition-duration: 0.01ms !important;
    }
  }
</style>

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

<div class="card">
    <h3>Carte animée 1</h3>
    <p>J'apparais en glissant.</p>
</div>
<div class="card">
    <h3>Carte animée 2</h3>
    <p>J'apparais avec un délai.</p>
</div>
<div class="card">
    <h3>Carte animée 3</h3>
    <p>J'apparais en dernier.</p>
</div>

🎯 Pratique

S'entraîner (clique pour ouvrir) :

✨ Prompt IA

Avec l'IA

Copiez ce prompt dans Claude ou ChatGPT :

Crée 3 animations CSS modernes pour un portfolio : une animation d'entrée pour les cartes, un effet hover élégant pour les boutons, et un loader. Inclus prefers-reduced-motion.

💬 Ré-explique sans regarder

Ré-explique sans regarder

Sans relire le code de l'IA : avec tes mots, pour animer une carte qui apparaît une seule fois au chargement, choisis-tu transition ou @keyframes ? Et pour un loader qui tourne en boucle ?

Une bonne explication dit : transition anime un changement déclenché par un état (hover, focus, ajout de classe), de A vers B, une seule fois. Pour une carte qui apparaît au chargement ou un loader qui boucle, il faut @keyframes avec animation : c'est autonome (pas besoin de déclencheur) et ça gère plusieurs étapes (0%, 50%, 100%) plus la répétition avec animation-iteration-count: infinite.

Exercice : Corrigez le code de l'IA

L'IA a créé des animations mais a oublié la media query prefers-reduced-motion. Ajoutez-la pour désactiver les animations pour les utilisateurs sensibles.

Corrigez le code

⚖️ Juge le code de l'IA

Accepter ou rejeter le code de l'IA

Tu as demandé à l'IA une carte qui glisse depuis la gauche au survol. Ton rôle de relecteur : accepter ce code tel quel ou le rejeter, et dire pourquoi.

.card {
    position: relative;
    left: 0;
    transition: left 0.3s ease;
}
.card:hover {
    left: 20px;
}

À rejeter. Le résultat visuel est correct, mais animer left force le navigateur à recalculer la mise en page (layout) à chaque frame : ça saccade, surtout sur mobile. Le réflexe pro : animer transform: translateX(20px), qui est géré par le compositeur (GPU) sans toucher au layout, donc fluide. Bonus manquant : pas de prefers-reduced-motion pour les utilisateurs sensibles.

🧠 Rappel libre

Rappel libre

Sans remonter dans la leçon : à quoi sert la fonction de timing dans transition: opacity 0.3s ease;, et que fait la media query prefers-reduced-motion: reduce ?

La fonction de timing (ease, linear, ease-in…) décrit le rythme de l'animation : ease démarre lentement, accélère, puis ralentit, alors que linear garde une vitesse constante. La media query prefers-reduced-motion: reduce s'active quand l'utilisateur a demandé moins d'animations dans son système ; on s'en sert pour réduire ou couper les transition et animation (ex. transition-duration: 0.01ms !important;) afin de protéger les personnes sensibles.

Quelle propriété anime un changement de couleur au survol ?

animation transition transform

Pourquoi utiliser prefers-reduced-motion ?

Pour améliorer les performances Pour rendre le site plus beau Pour protéger les utilisateurs sensibles aux animations

Quelle est la différence entre transition et @keyframes ?

Aucune différence transition anime entre 2 états, @keyframes permet des animations multi-étapes @keyframes est obsolète

Prochaine étape

Vos pages bougent, réagissent et respirent. Mais le CSS s'arrête là où commence la vraie interactivité : compter un clic, valider un formulaire, charger des données sans recharger la page. Pour ça, il faut un langage de programmation. Place à JavaScript, qui va rendre votre site vraiment vivant.

Découvrir JavaScript →