Variables, transitions et animations

Ce que tu vas apprendre

• Déclarer et utiliser des variables CSS pour centraliser couleurs et espaces.
• Adoucir un changement d'état avec une transition.
• Créer une animation avec @keyframes, en respectant les préférences du visiteur.

Le problème des valeurs répétées

Ton site de recettes utilise le même rouge foncé dans vingt règles. Pour le changer, tu dois toutes les modifier. Une variable CSS, officiellement une propriété personnalisée, règle ce problème : tu la déclares une fois, tu la réutilises partout.

Déclarer et utiliser une variable

Le nom d'une variable commence par deux tirets. On les déclare le plus souvent dans :root, qui désigne l'élément racine de la page :

:root {
  --couleur-principale: #8b1a1a;
  --fond: #faf6f0;
  --espace: 1rem;
}

.recette {
  background-color: var(--fond);
  border-left: 4px solid var(--couleur-principale);
  padding: var(--espace);
}

La fonction var(--nom) lit la valeur. Modifie --couleur-principale dans :root et toute la page change.

On peut donner une valeur de secours, utilisée si la variable n'existe pas :

color: var(--couleur-texte, #333);

Redéfinir selon le contexte

Les variables suivent la cascade et l'héritage. Une variable redéfinie dans un élément vaut pour cet élément et ses enfants :

.recette-vegetarienne {
  --couleur-principale: #2e6b2e;
}

Les règles qui utilisent var(--couleur-principale) à l'intérieur de .recette-vegetarienne deviennent vertes, sans écrire de nouvelle règle de couleur.

C'est aussi la base d'un thème sombre :

@media (prefers-color-scheme: dark) {
  :root {
    --fond: #1d1a17;
  }
}

Le navigateur applique ce bloc si le visiteur a choisi un thème sombre sur son système.

Les transitions

Un changement d'état est brutal par défaut : au survol, la couleur saute. Une transition rend le passage progressif.

.bouton {
  background-color: var(--couleur-principale);
  transition: background-color 0.3s ease;
}

.bouton:hover {
  background-color: #b22222;
}

La déclaration transition prend trois informations principales :

1. la propriété qui s'anime (background-color) ;
2. la durée (0.3s) ;
3. la courbe de vitesse (ease, linear, ease-in-out...).

Tu la poses sur l'état de départ, pas sur le :hover. Ainsi la transition joue à l'aller et au retour.

Évite transition: all, qui anime tout et peut surprendre. Nomme les propriétés utiles. Les plus fluides à animer sont opacity et transform.

.recette:hover {
  transform: translateY(-4px);
}

Les animations avec @keyframes

Une transition va d'un état à un autre au déclenchement. Pour une animation qui se joue seule, ou en boucle, il faut des images clés.

@keyframes apparition {
  from {
    opacity: 0;
    transform: translateY(1rem);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.recette {
  animation: apparition 0.5s ease-out;
}

@keyframes nomme l'animation et décrit ses étapes. La propriété animation l'applique avec une durée et une courbe. Au chargement, chaque carte apparaît en glissant vers le haut.

Pour plus d'étapes, utilise des pourcentages (0%, 50%, 100%). Une animation peut se répéter avec animation-iteration-count: infinite.

Respecter les préférences d'accessibilité

Certains visiteurs sont gênés par le mouvement. Leur système le signale, et CSS peut le lire :

@media (prefers-reduced-motion: reduce) {
  * {
    animation: none;
    transition: none;
  }
}

À retenir

• Une variable se déclare avec --nom (souvent dans :root) et se lit avec var(--nom).
• Les variables suivent la cascade : on peut les redéfinir dans un élément pour changer un thème local.
• Une transition adoucit un changement d'état ; pose-la sur l'état de départ.
• @keyframes décrit les étapes, animation l'applique avec durée et courbe.
• Anime de préférence opacity et transform, et évite transition: all.
• prefers-reduced-motion: reduce permet de couper les animations pour les visiteurs qui le demandent.