Exercice de CSS avancé : animer une horloge

Le but de l’exercice est de réaliser une horloge et de l’animer entièrement en CSS. Pour afficher l’heure exacte on pourra l’initialiser au chargement de la page en PHP ou en JavaScript. Le reste sera exclusivement du HTML et du CSS.

Le HTML est entièrement fournit au fil de la page, si besoin référez-vous à l’aide-mémoire.

Étape 1 : Le cadre

Avec les propriétés border-radius et box-shadow on obtient un disque avec un effet de relief

<section>
   <div class="clock">    
   </div>
</section>

Étape 2 : Réaliser le cadran en display GRID

Pour ce faire on aura besoin d’une grid de 7/7 et de jouer sur les “justify-self” et “align-self” pour peaufiner la courbe de la position des chiffres. Un choix de police condensé est judicieux pour améliorer le rendu.

       <div class="clock-center">
           <span class="number number-1">01</span>
           <span class="number number-2">02</span>
           <span class="number number-3">03</span>
           <span class="number number-4">04</span>
           <span class="number number-5">05</span>
           <span class="number number-6">06</span>
           <span class="number number-7">07</span>
           <span class="number number-8">08</span>
           <span class="number number-9">09</span>
           <span class="number number-10">10</span>
           <span class="number number-11">11</span>
           <span class="number number-12">12</span>
       </div>  

Étape 3 : On ajoute le support des aiguilles en display FLEX

      <div class="clock-top">
           <div class="pointer-container">
           </div>
      </div>
 

Étape 4 : Puis les aiguilles une à une

Elles seront toutes en “position: absolute” dans une autre div en flex pour pouvoir les centrer et les animer. On jouera sur le “bottom” pour le “point d’attache”, sur height et width pour les différencier.

       <div class="hour-container">
              <div class="hour-pointer"></div>
       </div>
       <div class="min-container">
               <div class="min-pointer"></div>
       </div>
       <div class="sec-container">
               <div class="sec-pointer"></div>
       </div>

Étape 5 : Des pseudo-elements pour les dernières touches de design sur la trotteuse

Avec des pseudo-éléments CSS “::before” et “::after” on personnalise le design de l’aiguille des secondes.

Étape 6 : L’animation des aiguilles en CSS

Pour cette étape vous devrez maitriser les animation CSS.

On animera la propriété “transform:rotateZ” à l’infini avec un keyframes de 0 à 360°. La durée de l’animation changera en fonction des aiguilles et pour un effet plus réaliste on jouera l’animation en steps(60) sur les aiguilles des secondes et des minutes.

Ici les durées ont été réduites pour l’exemple.

Étape 7 : Donner l’heure en temps réel

Pour cela il faut initialiser l’angle de départ de l’animation (et l’angle final à 360° de plus) en fonction de l’heure réelle au chargement de la page. Pour ce faire on convertit l’heure, les minutes et les secondes en degrés et on met à jour les valeurs CSS en JS ou on les injecte en PHP.

Exemple en Javascript

 <script>
(function () {
  //Converted Time in Degrees
  //Rotate From
  const d = new Date();
  const convertedSeconds =
    ((d.getSeconds() + d.getMilliseconds() / 1000) / 60) * 360;
  const convertedMinutes = (d.getMinutes() / 60) * 360;
  const convertedHours = ((d.getHours() + d.getMinutes() / 60) / 12) * 360;

  //Rotate To
  const rotateSecondsTo = convertedSeconds + 360;
  const rotateMinutesTo = convertedMinutes + 360;
  const rotateHoursTo = convertedHours + 360;

  //Update Css
  const root = document.documentElement;
  root.style.setProperty("--s-rotate-from", convertedSeconds + "deg");
  root.style.setProperty("--m-rotate-from", convertedMinutes + "deg");
  root.style.setProperty("--h-rotate-from", convertedHours + "deg");
  root.style.setProperty("--s-rotate-to", rotateSecondsTo + "deg");
  root.style.setProperty("--m-rotate-to", rotateMinutesTo + "deg");
  root.style.setProperty("--h-rotate-to", rotateHoursTo + "deg");
})();
</script>