Séance n°4 : Animation CSS

Mise en situation & Problématique

En conception Web moderne, les animations CSS jouent un rôle capital dans l'expérience utilisateur (UX). Elles permettent de donner vie aux interfaces graphiques, de signaler l'état d'un chargement en arrière-plan, d'attirer l'attention sur une action ou de guider l'utilisateur de manière intuitive et fluide, le tout sans alourdir la page avec du code JavaScript.

Problématique d'étude : On souhaite concevoir et animer les indicateurs de chargement (barres de progression) illustrés ci-dessous :

1. Squelette HTML5 initial

Le document HTML contient trois conteneurs représentant chacun une variante d'animation :

<!DOCTYPE html>
<html lang="fr">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Barres de progression animées</title>
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <div class="loader animation1">
    <div class="progress-bar"></div>
  </div>

  <div class="loader animation2">
    <div class="progress-bar"></div>
  </div>

  <div class="loader animation3">
    <div class="progress-bar"></div>
  </div>
</body>
</html>

Sans code CSS associé, le navigateur n'affiche rien à l'écran car les éléments <div> n'ont ni dimensions ni couleur de fond.

2. Définition du cadre et du remplissage initial en CSS

Définissons la boîte externe (le cadre) et le style de base de la barre intérieure :

• Cadre externe (.loader) : largeur 320px, hauteur 16px, marge verticale 5px, bordure fine #333 solid 1px, et positionnement position: relative;.
• Barre intérieure (.progress-bar) : remplit initialement 100% de la largeur et de la hauteur, avec un dégradé linéaire de vert foncé ( #007700) à vert clair ( #65ff65).

.loader {
  width: 320px;
  height: 16px;
  margin: 5px 0;
  border: #333 solid 1px;
  position: relative;
}

.animation1 .progress-bar {
  width: 100%;
  height: 100%;
  background: linear-gradient(to right, #007700, #65ff65);
}

Auto-évaluation & Prérequis

Avant d'aborder les animations CSS, assurez-vous de maîtriser les fondamentaux CSS3 vus lors des séances précédentes :

Principe de l'animation

Une animation CSS permet à un élément HTML de passer progressivement d'un style à un autre au cours du temps. Le navigateur calcule automatiquement toutes les valeurs intermédiaires (interpolation) entre les états déclarés.

Syntaxe générale

@keyframes nomDeLAnimation {
  /* Définition des états successifs */
}

Pour être visible à l'écran, une animation déclarée avec @keyframes doit obligatoirement être associée à un élément HTML via son sélecteur CSS.

Définition des étapes

1. Animation à deux états : mots-clés from et to

Lorsque l'animation ne comporte qu'un point de départ et un point d'arrivée simples, on utilise :

• from : style appliqué au tout début de l'animation (équivalent à 0%).
• to : style appliqué à la fin du cycle (équivalent à 100%).

@keyframes anim01 {
  from { background-color: red; }
  to   { background-color: yellow; }
}

.anim01 {
  width: 100px;
  height: 100px;
  background-color: red;
  animation-name: anim01;
  animation-duration: 2s;
}

2. Animation multi-étapes avec les Pourcentages (0% à 100%)

Pour créer des séquences complexes comportant plusieurs changements successifs, on remplace from et to par des pourcentages représentant la progression temporelle :

• 0% : moment initial du cycle.
• x% : état intermédiaire précis (ex. 25%, 50%, 75%).
• 100% : moment final du cycle.

Exemple 1 : Cycle de 4 couleurs consécutives

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

.anim02 {
  width: 100px;
  height: 100px;
  background-color: red;
  animation-name: anim02;
  animation-duration: 4s;
}

Exemple 2 : Déplacement spatial 2D sur trajectoire carrée

En combinant le changement de couleur avec les coordonnées left et top (sur un élément en position: relative;), on crée un mouvement orbital complet :

@keyframes anim03 {
  0%   { background-color: red;    left: 0px;   top: 0px; }
  25%  { background-color: yellow; left: 200px; top: 0px; }
  50%  { background-color: blue;   left: 200px; top: 110px; }
  75%  { background-color: green;  left: 0px;   top: 110px; }
  100% { background-color: red;    left: 0px;   top: 0px; }
}

.anim03 {
  width: 70px;
  height: 70px;
  position: relative;
  background-color: red;
  animation-name: anim03;
  animation-duration: 5s;
}

Propriétés minimales

Pour qu'une animation s'active sur un élément du document HTML, deux propriétés CSS fondamentales sont strictement indispensables :

1. animation-name : définit le nom de la règle @keyframes à exécuter sur cet élément.
   Valeur par défaut : none (aucune animation associée).
2. animation-duration : définit la durée totale d'un cycle d'animation (exprimée en secondes s ou en millisecondes ms, par exemple 3s ou 500ms).
   Valeur par défaut : 0s (animation inactive sans durée spécifiée).

Paramètres temporels & Répétition

CSS3 offre un éventail de propriétés précises pour contrôler le déclenchement, la répétition et le sens de lecture de l'animation :

• animation-delay (Délai d'attente) : retarde le démarrage de l'animation d'une durée déterminée (ex. 2s). Remarque : une valeur négative (ex. -1s) fait démarrer l'animation immédiatement, comme si elle avait déjà débuté 1 seconde auparavant.
  Valeur par défaut : 0s (démarrage immédiat sans retard).
• animation-iteration-count (Nombre de cycles) : détermine combien de fois l'animation doit se répéter :
  • Un nombre entier fixe (ex. 1, 3, 5).
  • Le mot-clé infinite : l'animation tourne en boucle perpétuelle sans jamais s'arrêter.
  Valeur par défaut : 1 (l'animation s'exécute un seul cycle).
• animation-direction (Sens de lecture) : définit si l'animation s'exécute de l'avant vers l'arrière ou en alternance :
  • normal : avance toujours dans le sens direct, de 0% vers 100%.
  • reverse : lecture inversée, de 100% vers 0%.
  • alternate : fait l'aller (0% → 100%) puis le retour (100% → 0%), créant un effet de va-et-vient fluide.
  • alternate-reverse : commence par le retour (100% → 0%), puis enchaîne avec l'aller.
  Valeur par défaut : normal (lecture de 0% à 100%).

Fonctions de lissage

La propriété animation-timing-function définit le profil d'accélération de l'élément tout au long de sa trajectoire.
Valeur par défaut : ease (départ modéré, accélération au centre, puis décélération douce à la fin).

Propriété animation

Au lieu de déclarer individuellement chaque propriété, CSS3 permet de combiner l'ensemble des paramètres en une seule ligne grâce à la propriété raccourcie (shorthand) :

/* Syntaxe standard */
animation: name duration timing-function delay iteration-count direction;

/* Exemple pratique */
animation: anim05 4s linear 1s infinite alternate;

Exemple combiné : Déplacement avec morphisme (carré ↔ cercle)

.anim04 {
  width: 70px;
  height: 70px;
  position: relative;
  background-color: red;
  animation: anim04 6s linear 1s infinite alternate;
}

@keyframes anim04 {
  0%   { background-color: red;    border-radius: 8px;  left: 0px;   top: 0px; }
  25%  { background-color: yellow; border-radius: 50%;  left: 200px; top: 0px; }
  50%  { background-color: blue;   border-radius: 8px;  left: 200px; top: 110px; }
  75%  { background-color: green;  border-radius: 50%;  left: 0px;   top: 110px; }
  100% { background-color: red;    border-radius: 8px;  left: 0px;   top: 0px; }
}

Tableau synthétique des propriétés d'animation CSS3

Application 1 : Barres de progression (Loader)

L'objectif de cet atelier est d'implémenter les trois barres de progression présentées dans la problématique en utilisant différentes techniques d'animation CSS3.

Cahier des charges & Travail à réaliser

1. Variante 1 — Remplissage progressif : Ajoutez une animation faisant varier la largeur du .progress-bar du premier loader de 0% à 100% :
   • Nommer l'animation : animation1.
   • Fixer la durée à 5s.
   • Fonction de lissage : linear.
   • Répétition : infinite.

   .animation1 .progress-bar {
     animation-name: animation1;
     animation-duration: 5s;
     animation-timing-function: linear;
     animation-iteration-count: infinite;
   }
   
   @keyframes animation1 {
     from { width: 0%; }
     to   { width: 100%; }
   }

2. Variante 2 — Navette horizontale d'un bloc : Appliquez les propriétés suivantes pour créer un curseur rouge mobile de 64px :

   .animation2 .progress-bar {
     width: 64px;
     height: 100%;
     background: linear-gradient(to left, #f00, #fd5353);
     position: absolute;
     animation-name: animation2;
     animation-duration: 5s;
     animation-timing-function: linear;
     animation-iteration-count: infinite;
   }
   
   @keyframes animation2 {
     from { left: 0px; }
     to   { left: 256px; } /* 320px - 64px = 256px */
   }

   Explication du calcul : Pour que le curseur ne sorte pas du cadre de 320px, sa position finale maximale à droite est de 320px - 64px = 256px.

3. Variante 3 — Remplissage multicolore alterné : Combinez le changement dynamique de couleur et l'allongement progressif :

   @keyframes animation3 {
     0% {
       background: linear-gradient(to left, #00f, #000070);
       width: 0%;
     }
     50% {
       background: linear-gradient(to left, #ff9900, #ffba53);
       width: 50%;
     }
     100% {
       background: linear-gradient(to left, #f00, #fd5353);
       width: 100%;
     }
   }
   
   .animation3 .progress-bar {
     width: 100%;
     height: 100%;
     position: absolute;
     animation-name: animation3;
     animation-duration: 2.5s;
     animation-direction: alternate;
     animation-timing-function: ease-in-out;
     animation-iteration-count: infinite;
   }

Application 2 : Smiley

On souhaite dessiner un visage expressif (Smiley) en pur CSS et animer son regard ainsi que sa bouche :

Structure HTML du visage

<div id="tete">
  <div id="yeux">
    <div class="oeil">
      <div class="iris">
        <div class="pupille"></div>
      </div>
    </div>
    <div class="oeil">
      <div class="iris">
        <div class="pupille"></div>
      </div>
    </div>
  </div>
  <div class="bouche"></div>
</div>

Consignes de réalisation

1. Mise en forme CSS de la tête : appliquez une forme circulaire (border-radius: 50%;), une couleur de fond jaune vif et positionnez le conteneur au centre de l'écran.
2. Yeux et Pupilles : créez les orbites avec un fond blanc, les iris en couleur et les pupilles sombres au centre grâce au positionnement absolu.
3. Animation du regard : déclarez une animation @keyframes qui déplace les pupilles de gauche à droite en utilisant la propriété left (en positionnement relatif ou absolu).
4. Animation de la bouche : appliquez une animation de déformation pour faire passer le smiley d'une expression neutre à un large sourire.

Application 3 : Montre à deux aiguilles

On souhaite réaliser une horloge analogique comportant deux aiguilles tournantes (heures et minutes) :

Structure HTML5

<div class="horloge">
  <div class="aiguille1"></div> <!-- Grande aiguille (minutes) -->
  <div class="aiguille2"></div> <!-- Petite aiguille (heures) -->
</div>

Consignes d'animation

1. Centrage des aiguilles : positionnez le point d'ancrage de la rotation à la base des aiguilles (avec transform-origin: bottom center; ou 50% 100%;).
2. Cycle de rotation : définissez une règle @keyframes rotation faisant tourner l'aiguille de 0deg à 360deg :

   @keyframes rotation {
     from { transform: rotate(0deg); }
     to   { transform: rotate(360deg); }
   }

3. Rapport de vitesse d'horlogerie :
   • L'aiguille des minutes (.aiguille1) effectue un tour complet en 60 secondes (animation: rotation 60s linear infinite;).
   • L'aiguille des heures (.aiguille2) est 12 fois plus lente : elle met donc 60s × 12 = 720s (12 minutes) pour accomplir une révolution complète (animation: rotation 720s linear infinite;).

Application 4 : Carrés tournants

Pour consolider votre maîtrise des coordonnées spatiales et des images clés, animez les quatre carrés ci-dessous pour reproduire fidèlement leur cycle de permutation rotative :

Code HTML fourni

<div class="gcarre">
  <div class="carre carre1"></div>
  <div class="carre carre2"></div>
  <div class="carre carre3"></div>
  <div class="carre carre4"></div>
</div>

Travail demandé

Utilisez les propriétés CSS étudiées dans cette séance (@keyframes, animation-name, animation-duration, animation-iteration-count et animation-timing-function: linear;) pour programmer la trajectoire de chaque carré en 4 étapes successives (0%, 25%, 50%, 75% et 100%).