Exercice : Une horloge qui se balance

Cet exercice se trouve dans le chapitre CSS3 - section Les transitions et animations. 

Pour le code HTML, une simple boîte fera l’affaire.

<div id="horloge">11:38:45</div> 

Pour le CSS, il y a le style de la div, qui lui-même utilise l’animation du balancement.

#horloge{ 
   padding: 3px; 
   box-shadow: 1px 1px 2px #000; 
   animation-name: tictac; 
   animation-duration:2s; 
   animation-iteration-count:infinite; 
   animation-timing-function:ease-in-out; 
   position: relative; 
   z-index: 3001; 
} 

Le style précédent fait appel à une animation : tictac. Le code définit que cette animation mettra 2 s pour s’exécuter entièrement. Le nombre de cycles est infini, donc elle recommencera toujours une fois arrivée à la fin.

La fonction utilisée (ease-in-out) permettra quant à elle d’avoir un effet de ralentissement au début et à la fin de l’animation.

@keyframes tictac { 
   0%        {transform:rotate(-5deg); margin-right: 13px;} 
   50% { 
     transform:rotate(5deg);  
     margin-right: 20px; 
   } 
   100% {transform:rotate(-5deg); margin-right: 13px;} 
} 

L’animation est paramétrée pour effectuer une rotation...