Conférence 7 : Transitions et animations CSS

Dans cette conférence, nous explorerons comment donner vie à vos pages Web à l'aide de transitions et d'animations CSS. Ces techniques vous permettent de créer des effets fluides et attrayants qui améliorent l'expérience utilisateur sans nécessiter JavaScript.

Introduction aux transitions CSS

Les transitions CSS vous permettent de modifier en douceur les valeurs des propriétés sur une durée spécifiée. Ils sont idéaux pour créer des effets de survol, des animations de boutons et d'autres éléments interactifs.

1. Syntaxe de base

Pour créer une transition, vous devez spécifier la propriété CSS à effectuer, la durée et les fonctions d'assouplissement facultatives.

• Exemple:

  .button {
    background-color: #4CAF50;
    transition: background-color 0.3s ease;
  }

  .button:hover {
    background-color: #45a049;
  }

Dans cet exemple, la couleur d'arrière-plan du bouton change progressivement en 0,3 seconde lorsqu'il est survolé.

2. Transition de plusieurs propriétés

Vous pouvez transférer plusieurs propriétés à la fois en les séparant par des virgules.

• Exemple:

  .box {
    width: 100px;
    height: 100px;
    background-color: #333;
    transition: width 0.5s, height 0.5s, background-color 0.5s;
  }

  .box:hover {
    width: 150px;
    height: 150px;
    background-color: #555;
  }

Cet exemple modifie en douceur la largeur, la hauteur et la couleur d'arrière-plan de la boîte au survol.

3. Fonctions d'assouplissement

Les fonctions d'assouplissement contrôlent la vitesse de transition à différents points, créant des effets tels que l'assouplissement, l'assouplissement ou les deux.

• Fonctions d'assouplissement courantes :
  • facilité : démarre lentement, puis accélère, puis ralentit à nouveau.
  • linéaire : maintient une vitesse constante.
  • easy-in : démarre lentement, puis accélère.
  • easy-out : démarre rapidement, puis ralentit.

Introduction aux animations CSS

Les animations CSS vous permettent de créer des séquences de changements plus complexes au fil du temps, au-delà des simples transitions. Vous pouvez animer plusieurs propriétés, contrôler le timing et créer des images clés pour un meilleur contrôle.

1. Syntaxe de base

Pour créer une animation, définissez des images clés et appliquez-les à un élément à l'aide de la propriété animation.

• Exemple:

  @keyframes example {
    0% {background-color: red; left: 0px;}
    50% {background-color: yellow; left: 100px;}
    100% {background-color: green; left: 0px;}
  }

  .animate-box {
    position: relative;
    width: 100px;
    height: 100px;
    background-color: red;
    animation: example 5s infinite;
  }

Dans cet exemple :

• La règle @keyframes définit les étapes de l'animation, en modifiant la couleur et la position de l'arrière-plan.
• La classe .animate-box applique l'animation, qui s'exécute pendant 5 secondes et se répète à l'infini.

2. Contrôler le timing de l'animation

Vous pouvez contrôler le timing, le délai et le nombre d'itérations d'une animation.

• Exemple:

  .animate-box {
    animation: example 5s ease-in-out 1s 3 alternate;
  }

• 5s : Durée de l'animation.
• easy-in-out : fonction d'assouplissement.
• 1s : Délai avant le démarrage de l'animation.
• 3 : L'animation se répétera trois fois.
• alternatif : l'animation inversera la direction à chaque itération.

3. Combiner des transitions et des animations

Vous pouvez utiliser des transitions et des animations ensemble pour créer des effets plus dynamiques.

• Exemple:

  .button {
    background-color: #4CAF50;
    transition: transform 0.3s ease;
  }

  .button:hover {
    transform: scale(1.1);
  }

  @keyframes pulse {
    0% {transform: scale(1);}
    50% {transform: scale(1.2);}
    100% {transform: scale(1);}
  }

  .pulse-button {
    animation: pulse 1s infinite;
  }

Cet exemple :

• La classe .button utilise une transition pour redimensionner légèrement le bouton en survol.
• La classe .pulse-button utilise une animation pour créer un effet d'impulsion continu.

Exemple pratique :

Combinons les transitions et les animations pour créer un bouton réactif et interactif.

HTML :

Hover Me!

CSS :

.animated-button {
  padding: 15px 30px;
  font-size: 16px;
  color: white;
  background-color: #008CBA;
  border: none;
  border-radius: 5px;
  cursor: pointer;
  transition: background-color 0.3s ease, transform 0.3s ease;
}

.animated-button:hover {
  background-color: #005f73;
  transform: translateY(-5px);
}

@keyframes shake {
  0% { transform: translateX(0); }
  25% { transform: translateX(-5px); }
  50% { transform: translateX(5px); }
  75% { transform: translateX(-5px); }
  100% { transform: translateX(0); }
}

.animated-button:active {
  animation: shake 0.5s;
}

Dans cet exemple :

• Le bouton change de couleur d'arrière-plan et se déplace légèrement vers le haut lorsqu'il est survolé.
• Lorsque vous cliquez sur le bouton, il tremble à l'aide d'une animation personnalisée.

Exercice pratique

1. Créez un effet de survol pour un lien qui change de couleur et ajoute un soulignement à l'aide d'une transition.
2. Créez une animation d'image clé qui déplace un élément dans un cercle.
3. Combinez des transitions et des animations pour créer un élément interactif comme un bouton ou une carte qui évolue, change de couleur ou s'anime lors de l'interaction.

Prochaine étape : Dans la prochaine conférence, nous explorerons CSS Flexbox Deep Dive, où vous apprendrez à utiliser pleinement Flexbox pour créer des mises en page avancées et réactives. Restez à l'écoute!

suivez-moi sur LinkedIn

Ridoy Hasan