Animations and transitions — CSS course

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 :

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:

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>

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

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

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

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

Commencer le cours JavaScript →

Start the JavaScript course →

Next step

Your pages move, react and breathe. But CSS stops where real interactivity begins: counting a click, validating a form, loading data without reloading the page. For that you need a programming language. Enter JavaScript, which will make your site truly come alive.

Discover JavaScript →