Créer des animations CSS3 avec des clés d'animation

Introduction

Dans ce laboratoire, les étudiants plongeront dans le monde des animations CSS3 en maîtrisant la puissante règle @keyframes et les techniques d'animation. Le cours propose une exploration complète de la création d'animations web dynamiques, en mettant l'accent sur la compréhension de la syntaxe des clés d'animation, la définition des propriétés d'animation et la mise en œuvre d'effets d'animation avancés sans dépendre de JavaScript.

Les participants apprendront à créer des animations lisses et complexes en définissant les étapes d'animation à l'aide de clés d'animation basées sur des pourcentages et de propriétés de transformation. Grâce à des exemples pratiques et des exercices pratiques, les étudiants découvriront comment déplacer, redimensionner et colorer dynamiquement des éléments, acquérant les compétences nécessaires pour créer des expériences web attrayantes et interactives en utilisant des techniques d'animation pure CSS3.

Comprendre la syntaxe des clés d'animation CSS3

Dans cette étape, vous allez apprendre la syntaxe fondamentale des clés d'animation CSS3, qui sont les briques maîtresses pour créer des animations web dynamiques. Les animations CSS vous permettent de transformer les éléments d'un style à l'autre de manière fluide sans utiliser JavaScript.

Commençons par comprendre la syntaxe de base des clés CSS. Ouvrez le WebIDE et créez un nouveau fichier appelé styles.css dans le répertoire ~/project.

Les animations de clés CSS sont définies à l'aide de la règle @keyframes, qui spécifie le comportement de l'animation à différents stades de la séquence d'animation. Voici un exemple simple pour illustrer la syntaxe :

@keyframes moveRight {
  /* État initial (0% ou "from") */
  from {
    transform: translateX(0);
  }

  /* État final (100% ou "to") */
  to {
    transform: translateX(300px);
  }
}

Dans cet exemple, moveRight est le nom de l'animation, et il définit comment un élément va se déplacer de sa position initiale à 300 pixels vers la droite.

Vous pouvez également utiliser des clés d'animation basées sur des pourcentages pour des animations plus complexes :

@keyframes colorChange {
  0% {
    background-color: red;
  }
  50% {
    background-color: green;
  }
  100% {
    background-color: blue;
  }
}

Cette animation montre comment vous pouvez spécifier plusieurs étapes d'une animation à l'aide de valeurs en pourcentage, permettant d'obtenir des effets plus complexes et dynamiques.

Points clés à retenir sur la syntaxe des clés d'animation :

Utilisez @keyframes suivi d'un nom d'animation unique
Définissez les états à l'aide de from/to ou de valeurs en pourcentage
Spécifiez les propriétés CSS à animer à chaque étape

Exemple de sortie d'une animation simple :

[Un élément div se déplaçant doucement d gauche à droite]
[Un élément div changeant de couleur de rouge à vert puis à bleu]

Définir une animation de base à l'aide de la règle @keyframes

Dans cette étape, vous allez apprendre à créer une animation de base à l'aide de la règle @keyframes en construisant une animation simple d'un élément en mouvement. Nous allons développer les connaissances de l'étape précédente et créer un exemple plus pratique.

Tout d'abord, créons un fichier HTML pour démontrer notre animation. Ouvrez le WebIDE et créez un nouveau fichier appelé index.html dans le répertoire ~/project :

<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>Basic CSS Animation</title>
    <link rel="stylesheet" href="styles.css" />
  </head>
  <body>
    <div class="animated-box"></div>
  </body>
</html>

Maintenant, mettons à jour le fichier styles.css que nous avons créé précédemment avec une animation plus détaillée :

.animated-box {
  width: 100px;
  height: 100px;
  background-color: blue;
  position: relative;
}

@keyframes moveAndResize {
  0% {
    /* État initial */
    transform: translateX(0) scale(1);
    background-color: blue;
  }

  50% {
    /* Milieu de l'animation */
    transform: translateX(200px) scale(1.5);
    background-color: green;
  }

  100% {
    /* État final */
    transform: translateX(400px) scale(1);
    background-color: red;
  }
}

Analysons la règle @keyframes :

Nous définissons une animation appelée moveAndResize
À 0% (début), la boîte est à sa position initiale
À 50% (milieu), la boîte se déplace de 200px vers la droite et augmente de taille
À 100% (fin), la boîte se déplace de 400px vers la droite et revient à sa taille initiale

Exemple de sortie :

[Une boîte bleue qui :
 - Se déplace d gauche à droite
 - Change de taille de normale à plus grande puis revient à la normale
 - Change de couleur de bleu à vert puis à rouge]

Cet exemple montre comment :

Créer une animation multi-étapes
Utiliser des clés d'animation basées sur des pourcentages
Combiner plusieurs transformations (translation et mise à l'échelle)
Changer de couleur pendant l'animation

Appliquer des propriétés d'animation aux éléments HTML

Dans cette étape, vous allez apprendre à appliquer des propriétés d'animation aux éléments HTML, donnant vie à vos animations de clés. Nous allons modifier le fichier styles.css précédent pour ajouter des propriétés d'animation spécifiques qui contrôlent le comportement de l'animation.

Mettez à jour le fichier styles.css avec le CSS suivant :

.animated-box {
  width: 100px;
  height: 100px;
  background-color: blue;
  position: relative;

  /* Propriétés d'animation */
  animation-name: moveAndResize; /* Nom de l'animation de clés */
  animation-duration: 3s; /* Durée totale d'un cycle d'animation */
  animation-timing-function: ease-in-out; /* Accélération et décélération douces */
  animation-delay: 1s; /* Attendre 1 seconde avant de commencer */
}

@keyframes moveAndResize {
  0% {
    transform: translateX(0) scale(1);
    background-color: blue;
  }

  50% {
    transform: translateX(200px) scale(1.5);
    background-color: green;
  }

  100% {
    transform: translateX(400px) scale(1);
    background-color: red;
  }
}

Propriétés d'animation clés expliquées :

animation-name : Relie l'élément à une règle @keyframes spécifique
animation-duration : Définit la durée totale d'un cycle d'animation complet
animation-timing-function : Contrôle la courbe de vitesse de l'animation
animation-delay : Spécifie une période d'attente avant le début de l'animation

Vous pouvez également utiliser la propriété raccourcie animation pour combiner celles-ci :

.animated-box {
  animation: moveAndResize 3s ease-in-out 1s;
}

Exemple de sortie :

[Une boîte bleue qui :
 - Attend 1 seconde avant de commencer
 - Se déplace doucement d gauche à droite
 - Change progressivement de taille et de couleur
 - Met 3 secondes pour terminer un cycle d'animation]

Personnaliser le rythme et l'itération d'une animation

Dans cette étape, vous allez apprendre à affiner vos animations CSS en contrôlant leur rythme, leur itération et leur direction. Nous allons développer l'exemple précédent pour démontrer une personnalisation d'animation avancée.

Mettez à jour le fichier styles.css avec le CSS suivant :

.animated-box {
  width: 100px;
  height: 100px;
  background-color: blue;
  position: relative;

  /* Personnaliser les propriétés d'animation */
  animation-name: moveAndResize;
  animation-duration: 3s;
  animation-timing-function: cubic-bezier(0.5, 0.1, 0.3, 1);
  animation-iteration-count: 3; /* Répéter l'animation 3 fois */
  animation-direction: alternate; /* Changer de direction à chaque itération */
  animation-fill-mode: forwards; /* Conserver l'état final après l'animation */
}

@keyframes moveAndResize {
  0% {
    transform: translateX(0) scale(1);
    background-color: blue;
  }

  100% {
    transform: translateX(400px) scale(1.5);
    background-color: red;
  }
}

Propriétés de personnalisation d'animation clés :

animation-timing-function : Contrôle la courbe de vitesse (par exemple, cubic-bezier() pour une accélération personnalisée)
animation-iteration-count : Définit le nombre de fois que l'animation se répète
animation-direction : Détermine la direction de lecture de l'animation
animation-fill-mode : Spécifie comment les styles sont appliqués avant/après l'animation

Vous pouvez également utiliser la propriété raccourcie animation :

.animated-box {
  animation: moveAndResize 3s cubic-bezier(0.5, 0.1, 0.3, 1) 3 alternate forwards;
}

Exemple de sortie :

[Une boîte bleue qui :
 - Se déplace et change de taille 3 fois
 - Change de direction à chaque itération
 - Utilise une courbe de vitesse personnalisée
 - Reste à la position finale après l'animation]

Expérimenter avec des effets d'animation avancés

Dans cette étape, vous allez explorer des techniques d'animation CSS avancées en créant une animation complexe à plusieurs éléments qui démontre le pouvoir des clés d'animation CSS et des transformations.

Mettez à jour le fichier index.html pour inclure plusieurs éléments animés :

<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>Advanced CSS Animations</title>
    <link rel="stylesheet" href="styles.css" />
  </head>
  <body>
    <div class="container">
      <div class="circle circle1"></div>
      <div class="circle circle2"></div>
      <div class="circle circle3"></div>
    </div>
  </body>
</html>

Remplacez le contenu de styles.css par l'animation avancée suivante :

.container {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
  background-color: #f0f0f0;
}

.circle {
  width: 100px;
  height: 100px;
  border-radius: 50%;
  position: absolute;
  opacity: 0.7;
}

.circle1 {
  background-color: #ff6b6b;
  animation: orbit1 4s infinite linear;
}

.circle2 {
  background-color: #4ecdc4;
  animation: orbit2 4s infinite linear;
}

.circle3 {
  background-color: #45b7d1;
  animation: orbit3 4s infinite linear;
}

@keyframes orbit1 {
  0% {
    transform: rotate(0deg) translateX(150px) rotate(0deg);
  }
  100% {
    transform: rotate(360deg) translateX(150px) rotate(-360deg);
  }
}

@keyframes orbit2 {
  0% {
    transform: rotate(120deg) translateX(200px) rotate(-120deg);
  }
  100% {
    transform: rotate(480deg) translateX(200px) rotate(-480deg);
  }
}

@keyframes orbit3 {
  0% {
    transform: rotate(240deg) translateX(250px) rotate(-240deg);
  }
  100% {
    transform: rotate(600deg) translateX(250px) rotate(-600deg);
  }
}

Techniques d'animation avancées clés démontrées :

Plusieurs animations simultanées
Rotation et translation complexes
Animation infinie avec un rythme linéaire
Mouvement orbital étagé
Variations d'opacité et de couleur

Exemple de sortie :

[Trois cercles colorés qui orbitent autour d'un point central
 - Les cercles se déplacent à des distances différentes
 - Rotation continue et fluide
 - Effet de chevauchement et translucide]

Sommaire

Dans ce laboratoire, les participants ont exploré les bases des clés d'animation CSS3, apprenant à créer des animations web dynamiques sans utiliser JavaScript. Le laboratoire s'est concentré sur la compréhension de la syntaxe de la règle @keyframes, qui permet aux développeurs de définir des séquences d'animation complexes en utilisant des états basés sur des pourcentages ou des états from/to. Les participants ont appris à spécifier les comportements d'animation en transformant des propriétés CSS telles que la position, la couleur et la taille à différents stades d'une séquence d'animation.

Les exercices pratiques ont guidé les apprenants dans la création d'effets d'animation de base et avancés, y compris le déplacement d'éléments sur l'écran, le changement de couleur et la personnalisation du rythme et de l'itération d'animation. En expérimentant différentes configurations de clés d'animation, les participants ont acquis une expérience pratique dans la création d'animation web fluides et attrayantes qui améliorent l'interactivité et l'attrait visuel de l'interface utilisateur.