Survolez le cadre ci-contre pour le voir changer de couleurs et de forme.
    Je vais essayer de détailler le montage pour inciter certain(e)s à faire quelques essais.
   Tout d'abord, j'utilise les formules les plus simples avant de me lancer dans des Kolossales petites finesses, encore inaccessibles pour moi !
   Ainsi, les paramètres de mes animations sont tous les mêmes et ne s'écrivent donc qu'une seule fois; il est possible de les rendre indépendantes mais ce sera pour une autre fois .
   Le code de base est simple et on y rajoute "ce que l'on veut" ( du moins ce que le programme reconnait !).
  Vous trouverez des sites explicatifs sur le net...

Commençons par un simple carré bordure noire et non l'exemple ci-dessus, qui peut s'écrire ...
<p style="width: 60px; height: 60px; border: 2px solid black;">Notre exemple</p>
nous allons l'identifier afin que les animations s'appliquent sur lui
<p class="truc" style="width: 60px; height: 60px; border: 2px solid black;">Notre exemple</p>
Passons aux animations; ce que j'en ai retenu c'est que les différents navigateurs demandent une écriture différentes pour la même animation et qui l'on pourrait écrire, en théorie, beaucoup de lignes pour les différents navigateurs; dans mon exemple, juste deux lignes pour mozilla (moz) et Google Chrome/Safari (webkit).
Le code que j'ai trouvé sur le net commence ainsi:
<style type="text/css"><!--
.truc {
-webkit-transition: all 4s ease-in-out;
   -moz-transition: all 4s ease-in-out;}
où l'on retrouve le nom (truc) donné à notre image ou paragraphe et les paramètres de toutes les animations car j'ai écrit: "all" ... restons-en là pour le moment, je n'en sais pas encore beaucoup plus ! 4 secondes est le temps que j'ai donné pour effectuer chaque animation et "ease-in-out" correspond à une variation qui commence et se termine doucement.
Il faut ensuite indiquer qu'au survol, l'image devra être modifiée selon les critères que l'on déterminera: deuxième partie du code:
.truc:hover {
   -webkit-transform: translate(50px, 70px) scale(3) ;
   -moz-transform: translate(50px, 70px) scale(3);
--></style>
...dans cette deuxième partie, au survol, deux paramètres apparaissent: la translation de 50px vers la droite et 70px vers le bas (translate(50px, 70px) suivi du changement d'échelle de l'image (scale(3)). La translation est nécessaire lorsqu'on fait un changement d'échelle afin que l'image reste dans la page, l'agrandissement se faisant à partir du centre de l'image.
D'ores et déjà, nous pouvons appliquer une animation sur notre carré en écrivant:
<p class="truc" style="width: 60px; height: 60px; border: 2px solid black;">
    Notre exemple
  </p>
<style type="text/css"><!--
.truc {
-webkit-transition: all 4s ease-in-out;
   -moz-transition: all 4s ease-in-out;
}
.truc:hover {
   -webkit-transform: translate(60px, 70px) scale(3) ;
   -moz-transform: translate(60px, 70px) scale(3);
--></style>
Suite dans mon article de demain et merci de me permettre d'assimiler ces paramètres en écrivant ces lignes !