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 :

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.

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

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 →