Les transitions CSS - des transitions fluides entre états

Bienvenue dans la Vallée des Rois de l'animation ! Tout comme les hiéroglyphes égyptiens pouvaient passer d'une forme à une autre sous l'influence de la lumière du soleil, en CSS nous pouvons créer des transitions fluides - des passages entre les états d'un élément. C'est la façon la plus simple et la plus couramment utilisée d'ajouter de l'animation à une page !

Que sont les transitions ?

Les transitions permettent de modifier en douceur des propriétés CSS d'une valeur à une autre sur une durée définie.

Sans transition :

• Le changement est instantané (0 ms)
• Un effet de « saut »

Avec transition :

• Le changement est progressif
• Un effet fluide et professionnel

1/* Sans transition */
2.button {
3  background: blue;
4}
5
6.button:hover {
7  background: red;  /* Changement instantané */
8}
9
10/* Avec transition */
11.button {
12  background: blue;
13  transition: background 0.3s;  /* Changement fluide sur 0.3s */
14}
15
16.button:hover {
17  background: red;  /* Maintenant le changement est fluide ! */
18}

Analogie égyptienne : c'est comme le mouvement fluide du soleil, du lever au coucher, au-dessus des pyramides - il ne saute pas instantanément, mais se déplace progressivement.

Syntaxe des transitions

Syntaxe de base

1/* transition: property duration timing-function delay; */
2
3.element {
4  transition: background-color 0.3s ease 0s;
5}
6
7/* Ou séparément */
8.element {
9  transition-property: background-color;
10  transition-duration: 0.3s;
11  transition-timing-function: ease;
12  transition-delay: 0s;
13}

Composantes d'une transition :

1. transition-property - quelle propriété animer
2. transition-duration - combien de temps dure l'animation
3. transition-timing-function - comment la vitesse change au fil du temps
4. transition-delay - délai avant le démarrage

Transition-property - quoi animer ?

1/* Une seule propriété */
2.button {
3  transition-property: background-color;
4}
5
6/* Plusieurs propriétés */
7.button {
8  transition-property: background-color, color, transform;
9}
10
11/* Toutes les propriétés (à utiliser avec précaution !) */
12.button {
13  transition-property: all;
14}

Propriétés qui peuvent être animées :

• Couleurs : color, background-color, border-color
• Dimensions : width, height, padding, margin
• Position : top, left, right, bottom
• Transform : transform
• Opacité : opacity
• Box-shadow, border-radius, font-size, line-height
• Et bien d'autres encore...

Propriétés qui NE PEUVENT PAS être animées :

• display (pas de valeurs intermédiaires)
• position (static, relative, absolute)
• font-family (pas de valeurs intermédiaires)

Transition-duration - combien de temps ?

1/* En secondes */
2.element {
3  transition-duration: 0.3s;  /* 300ms - valeur standard */
4}
5
6/* En millisecondes */
7.element {
8  transition-duration: 300ms;
9}
10
11/* Durées différentes pour des propriétés différentes */
12.element {
13  transition-property: background-color, transform;
14  transition-duration: 0.3s, 0.5s;
15  /* background-color: 0.3s, transform: 0.5s */
16}

Durées recommandées :

• 0.15s-0.2s - rapide, réactif (survol des liens)
• 0.3s-0.4s - standard (boutons, cartes)
• 0.5s-0.8s - plus lent, plus spectaculaire (grands changements)
• 1s+ - très lent (uniquement pour des effets spéciaux)

Transition-timing-function - courbe de timing

La fonction de timing définit comment la vitesse de l'animation change au fil du temps :

1.element {
2  /* Linear - vitesse constante */
3  transition-timing-function: linear;
4
5  /* Ease - démarrage lent, rapide, fin lente (par défaut) */
6  transition-timing-function: ease;
7
8  /* Ease-in - démarrage lent, fin rapide */
9  transition-timing-function: ease-in;
10
11  /* Ease-out - démarrage rapide, fin lente */
12  transition-timing-function: ease-out;
13
14  /* Ease-in-out - démarrage et fin lents */
15  transition-timing-function: ease-in-out;
16
17  /* Cubic-bezier - courbe personnalisée */
18  transition-timing-function: cubic-bezier(0.68, -0.55, 0.265, 1.55);
19
20  /* Steps - par paliers (non fluide) */
21  transition-timing-function: steps(4);
22}

Visualisation des fonctions de timing :

• linear : --------- (vitesse constante)
• ease : _/‾‾‾_ (démarrage et fin lents)
• ease-in : __/‾‾ (démarrage lent)
• ease-out : ‾‾__ (fin lente)
• ease-in-out : _/‾_ (le plus naturel)

Outil en ligne : https://cubic-bezier.com/

Transition-delay - délai

1.element {
2  transition-delay: 0.2s;  /* Démarre après 0.2s */
3}
4
5/* Délais différents pour des propriétés différentes */
6.element {
7  transition-property: opacity, transform;
8  transition-duration: 0.3s, 0.3s;
9  transition-delay: 0s, 0.1s;
10  /* opacity immédiatement, transform après 0.1s */
11}

Exemples pratiques

1. Effet de survol sur un bouton

1<button class="btn">Clique-moi</button>

1.btn {
2  background: #3498db;
3  color: white;
4  padding: 12px 24px;
5  border: none;
6  border-radius: 4px;
7  cursor: pointer;
8  font-size: 16px;
9
10  /* Transition sur plusieurs propriétés */
11  transition: background-color 0.3s ease,
12              transform 0.2s ease,
13              box-shadow 0.3s ease;
14}
15
16.btn:hover {
17  background: #2980b9;
18  transform: translateY(-2px);
19  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
20}
21
22.btn:active {
23  transform: translateY(0);
24  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
25}

2. Survol de carte - révélation

1<div class="card">
2  <img src="pyramid.jpg" alt="Pyramide">
3  <div class="card-overlay">
4    <h3>Grande Pyramide</h3>
5    <p>L'une des sept merveilles du monde</p>
6  </div>
7</div>

1.card {
2  position: relative;
3  width: 300px;
4  height: 400px;
5  overflow: hidden;
6  border-radius: 8px;
7}
8
9.card img {
10  width: 100%;
11  height: 100%;
12  object-fit: cover;
13  transition: transform 0.5s ease;
14}
15
16.card-overlay {
17  position: absolute;
18  bottom: 0;
19  left: 0;
20  right: 0;
21  background: linear-gradient(to top, rgba(0,0,0,0.8), transparent);
22  padding: 20px;
23  color: white;
24
25  /* L'overlay commence sous la carte */
26  transform: translateY(100%);
27  transition: transform 0.4s ease;
28}
29
30.card:hover img {
31  transform: scale(1.1);  /* Zoom sur l'image */
32}
33
34.card:hover .card-overlay {
35  transform: translateY(0);  /* L'overlay glisse vers le haut */
36}

3. Soulignement des liens de navigation

1<nav>
2  <a href="#" class="nav-link">Accueil</a>
3  <a href="#" class="nav-link">À propos</a>
4  <a href="#" class="nav-link">Contact</a>
5</nav>

1.nav-link {
2  position: relative;
3  color: #2c3e50;
4  text-decoration: none;
5  padding: 10px 0;
6  display: inline-block;
7}
8
9/* Soulignement via le pseudo-élément ::after */
10.nav-link::after {
11  content: '';
12  position: absolute;
13  bottom: 0;
14  left: 0;
15  width: 0;  /* Commence à 0 */
16  height: 2px;
17  background: goldenrod;
18
19  /* Anime la largeur */
20  transition: width 0.3s ease;
21}
22
23.nav-link:hover::after {
24  width: 100%;  /* S'étend sur toute la largeur */
25}

4. Apparition en fondu d'une fenêtre modale

1<div class="modal" id="myModal">
2  <div class="modal-content">
3    <h2>Titre de la modale</h2>
4    <p>Contenu de la modale...</p>
5    <button class="close">Fermer</button>
6  </div>
7</div>

1.modal {
2  position: fixed;
3  top: 0;
4  left: 0;
5  width: 100%;
6  height: 100%;
7  background: rgba(0, 0, 0, 0.8);
8  display: flex;
9  align-items: center;
10  justify-content: center;
11
12  /* Commence invisible */
13  opacity: 0;
14  pointer-events: none;
15
16  /* Anime l'opacité et l'arrière-plan */
17  transition: opacity 0.3s ease;
18}
19
20.modal.active {
21  opacity: 1;
22  pointer-events: auto;
23}
24
25.modal-content {
26  background: white;
27  padding: 30px;
28  border-radius: 8px;
29  max-width: 500px;
30
31  /* Commence plus bas */
32  transform: translateY(50px);
33  transition: transform 0.3s ease 0.1s;  /* Délai de 0.1s */
34}
35
36.modal.active .modal-content {
37  transform: translateY(0);
38}

5. Squelette de chargement

1<div class="skeleton">
2  <div class="skeleton-line"></div>
3  <div class="skeleton-line"></div>
4  <div class="skeleton-line short"></div>
5</div>

1.skeleton-line {
2  height: 16px;
3  background: linear-gradient(
4    90deg,
5    #f0f0f0 0%,
6    #e0e0e0 50%,
7    #f0f0f0 100%
8  );
9  background-size: 200% 100%;
10  border-radius: 4px;
11  margin-bottom: 10px;
12
13  /* Anime la position du dégradé */
14  animation: skeleton-loading 1.5s ease-in-out infinite;
15}
16
17.skeleton-line.short {
18  width: 60%;
19}
20
21@keyframes skeleton-loading {
22  0% {
23    background-position: 200% 0;
24  }
25  100% {
26    background-position: -200% 0;
27  }
28}

Transitions vs animations

Utilise les transitions quand :

• Tu as besoin d'un simple changement entre deux états
• L'animation est déclenchée par une interaction de l'utilisateur (hover, focus, click)
• Tu veux animer le retour à l'état initial
• Une implémentation plus simple

Utilise les animations (@keyframes) quand :

• Tu as besoin de plus de 2 états (keyframes)
• L'animation doit se jouer automatiquement (sans interaction)
• Tu as besoin de boucles (infinite)
• Tu as besoin d'un contrôle précis du timing

Transitions multiples

1/* Notation raccourcie - tout d'un coup */
2.element {
3  transition: background 0.3s ease,
4              color 0.3s ease,
5              transform 0.5s ease-out 0.1s,
6              box-shadow 0.4s ease;
7}
8
9/* Ou encore plus court (pour les mêmes valeurs) */
10.element {
11  transition: all 0.3s ease;
12}

Attention avec all : cela peut animer des propriétés non désirées et nuire aux performances. Il vaut mieux lister les propriétés spécifiques.

Performance des transitions

Propriétés rapides (accélérées par le GPU) :

• transform (translate, scale, rotate)
• opacity

Propriétés lentes :

• width, height (provoquent un reflow)
• margin, padding (provoquent un reflow)
• top, left (plus lentes que transform)

1/* Lent */
2.element {
3  transition: width 0.3s, left 0.3s;
4}
5
6.element:hover {
7  width: 200px;
8  left: 100px;
9}
10
11/* Rapide */
12.element {
13  transition: transform 0.3s, opacity 0.3s;
14}
15
16.element:hover {
17  transform: translateX(100px) scaleX(2);
18  opacity: 0.8;
19}

Récapitulatif

Transitions CSS :

• Transitions fluides entre deux états
• Déclenchées par des changements CSS (hover, focus, classe)
• Syntaxe : transition: property duration timing-function delay
• Les plus populaires : opacity, transform
• Durée recommandée : 0.2s-0.4s
• Fonction de timing : ease-in-out pour un effet naturel

Bonnes pratiques :

1. Anime transform et opacity pour les performances
2. Utilise ease-in-out pour un effet naturel
3. 0.2s-0.4s pour la plupart des interactions
4. Teste sur les appareils mobiles
5. Ajoute les transitions à l'état de base, pas à :hover

1* {
2  margin: 0;
3  padding: 0;
4  box-sizing: border-box;
5}
6
7body {
8  font-family: 'Segoe UI', sans-serif;
9  background: linear-gradient(135deg, #8d6e2e, #c9a84c);
10  min-height: 100vh;
11  display: flex;
12  justify-content: center;
13  align-items: center;
14  color: #3d2914;
15}
16
17.scene {
18  text-align: center;
19  padding: 20px;
20}
21
22h2 {
23  margin-bottom: 30px;
24  color: #3d2914;
25}
26
27.scroll-container {
28  display: flex;
29  justify-content: center;
30  margin: 20px 0;
31}
32
33.papyrus {
34  width: 300px;
35  background: linear-gradient(180deg, #f5deb3, #deb887, #d2b48c);
36  border-radius: 8px;
37  padding: 25px;
38  border: 3px solid #8d6e2e;
39  cursor: pointer;
40  overflow: hidden;
41  transform-origin: left center;
42  /* Ajoute la transition ici */
43  /* transition: transform 0.6s ease-in-out, box-shadow 0.6s ease; */
44  transform: scaleX(0.3);
45}
46
47/* Ajoute l'effet :hover pour .papyrus */
48/* .papyrus:hover { */
49/*   transform: scaleX(1); */
50/*   box-shadow: 0 8px 25px rgba(0, 0, 0, 0.3); */
51/* } */
52
53.papyrus-content {
54  font-family: serif;
55  font-size: 16px;
56  line-height: 1.8;
57  color: #3d2914;
58}
59
60.hint {
61  margin-top: 30px;
62  color: #5a3d1a;
63  font-style: italic;
64}

Souviens-toi : les transitions sont comme le mouvement fluide du soleil au-dessus des pyramides égyptiennes - pas de sauts, mais des transitions progressives et naturelles !