Aller au contenu principal

📚 Transitions CSS

Les transitions CSS permettent d'animer les changements de propriétés CSS de manière fluide plutôt qu'instantanée. Elles rendent l'interface plus agréable (à moins d'avoir trop de transitions!) et plus fluide.

Syntaxe de base​

Transition simple​

La propriété transition définit quelle propriété animer et combien de temps dure l'animation.

.bouton {
    background-color: #3498db;
    transition: background-color 0.3s;
}

.bouton:hover {
    background-color: #2980b9;
}
info

La syntaxe de base est: transition: propriété durée;

  • propriété: La propriété CSS à animer (ex: background-color, transform)
  • durée: Le temps de l'animation en secondes (s) ou millisecondes (ms)
<!DOCTYPE html>
<html>
<head>
  <link rel="stylesheet" href="styles.css">
</head>
<body>
  <h2>Passez la souris sur le bouton</h2>
  <button class="bouton">Bouton avec transition</button>
  
  <h3>Comparaison</h3>
  <button class="bouton-sans-transition">Sans transition</button>
</body>
</html>
Open on CodeSandboxOpen Sandbox

Durée de la transition​

La durée détermine la vitesse de l'animation.

.rapide {
    transition: background-color 0.1s;    /* Très rapide */
}

.normale {
    transition: background-color 0.3s;    /* Durée standard */
}

.lente {
    transition: background-color 1s;      /* Lente */
}

.tres-lente {
    transition: background-color 2s;      /* Très lente */
}
<!DOCTYPE html>
<html>
<head>
  <link rel="stylesheet" href="styles.css">
</head>
<body>
  <h2>Différentes durées de transition</h2>
  <div class="boite rapide">0.1s - Très rapide</div>
  <div class="boite normale">0.3s - Normale</div>
  <div class="boite lente">1s - Lente</div>
  <div class="boite tres-lente">2s - Très lente</div>
</body>
</html>
Open on CodeSandboxOpen Sandbox

Fonctions de transition (timing functions)​

Les fonctions de transition contrôlent comment l'animation progresse dans le temps. Elles définissent l'accélération et la décélération.

.element {
    transition: transform 0.5s ease;
}

Fonctions principales​

ease (par défaut)

  • Démarre lentement, accélère au milieu, ralentit à la fin
  • La plus naturelle et agréable visuellement

linear

  • Vitesse constante du début à la fin
  • Peut sembler mécanique

ease-in

  • Démarre lentement, puis accélère
  • Bon pour les éléments qui sortent de l'écran

ease-out

  • Démarre rapidement, puis ralentit
  • Bon pour les éléments qui entrent dans l'écran

ease-in-out

  • Démarre lentement, vitesse normale au milieu, ralentit à la fin
  • Similaire à ease mais plus prononcé
.ease {
    transition: transform 0.5s ease;
}

.linear {
    transition: transform 0.5s linear;
}

.ease-in {
    transition: transform 0.5s ease-in;
}

.ease-out {
    transition: transform 0.5s ease-out;
}

.ease-in-out {
    transition: transform 0.5s ease-in-out;
}
<!DOCTYPE html>
<html>
<head>
  <link rel="stylesheet" href="styles.css">
</head>
<body>
  <h2>Fonctions de transition</h2>
  <p>Passez la souris sur les boîtes pour voir la différence</p>
  
  <div class="boite ease">
      <span>ease (défaut)</span>
      <div class="balle"></div>
  </div>
  
  <div class="boite linear">
      <span>linear</span>
      <div class="balle"></div>
  </div>
  
  <div class="boite ease-in">
      <span>ease-in</span>
      <div class="balle"></div>
  </div>
  
  <div class="boite ease-out">
      <span>ease-out</span>
      <div class="balle"></div>
  </div>
  
  <div class="boite ease-in-out">
      <span>ease-in-out</span>
      <div class="balle"></div>
  </div>
</body>
</html>
Open on CodeSandboxOpen Sandbox

astuce

Quelle fonction utiliser?

  • ease (défaut) - Bon choix pour la plupart des cas
  • ease-out - Parfait pour les éléments qui apparaissent (boutons, modales)
  • ease-in - Bon pour les éléments qui disparaissent
  • linear - Utilisez rarement, sauf pour des animations continues (rotations, défilements)

Animer plusieurs propriétés​

Méthode 1: Lister les propriétés​

Vous pouvez animer plusieurs propriétés en les séparant par des virgules.

.carte {
    background-color: white;
    transform: scale(1);
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
    
    transition: background-color 0.3s, 
                transform 0.3s, 
                box-shadow 0.3s;
}

.carte:hover {
    background-color: #f8f9fa;
    transform: scale(1.05);
    box-shadow: 0 8px 16px rgba(0,0,0,0.2);
}

Méthode 2: Utiliser all​

Le mot-clé all anime toutes les propriétés qui changent.

.element {
    transition: all 0.3s;
}
astuce

Utilisez all pour simplifier, mais soyez conscient que cela anime toutes les propriétés qui changent, ce qui peut parfois causer des animations non désirées.

<!DOCTYPE html>
<html>
<head>
  <link rel="stylesheet" href="styles.css">
</head>
<body>
  <h2>Passez la souris sur les cartes</h2>
  
  <div class="carte">
      <h3>Carte avec transitions</h3>
      <p>Cette carte s'agrandit et change de couleur au survol.</p>
  </div>
  
  <div class="carte">
      <h3>Une autre carte</h3>
      <p>Même effet sur toutes les cartes.</p>
  </div>
</body>
</html>
Open on CodeSandboxOpen Sandbox

Propriétés couramment animées​

Voici les propriétés les plus souvent utilisées avec les transitions:

Couleurs​

.element {
    transition: background-color 0.3s, color 0.3s, border-color 0.3s;
}

Transformation (transform)​

/* Agrandissement */
.element {
    transform: scale(1);
    transition: transform 0.3s;
}
.element:hover {
    transform: scale(1.1);
}

/* Rotation */
.element {
    transform: rotate(0deg);
    transition: transform 0.3s;
}
.element:hover {
    transform: rotate(45deg);
}

/* Déplacement */
.element {
    transform: translateY(0);
    transition: transform 0.3s;
}
.element:hover {
    transform: translateY(-10px);
}

Opacité​

.element {
    opacity: 0.5;
    transition: opacity 0.3s;
}
.element:hover {
    opacity: 1;
}

Dimensions​

.element {
    width: 200px;
    height: 100px;
    transition: width 0.3s, height 0.3s;
}
.element:hover {
    width: 250px;
    height: 120px;
}
<!DOCTYPE html>
<html>
<head>
  <link rel="stylesheet" href="styles.css">
</head>
<body>
  <h2>Propriétés animées courantes</h2>
  
  <div class="grille">
      <div class="boite scale">
          <p>Scale</p>
      </div>
      
      <div class="boite rotate">
          <p>Rotate</p>
      </div>
      
      <div class="boite translate">
          <p>Translate</p>
      </div>
      
      <div class="boite opacity">
          <p>Opacity</p>
      </div>
  </div>
</body>
</html>
Open on CodeSandboxOpen Sandbox