Voici un billet sur les possibilités d'animations (translations, rotations et zooms) opérables dans une simple feuille de style CSS, pour un DocType HTML5.

Le CSS3 permet de faire désormais ce qui était jadis réservé au JavaScript, à savoir effectuer des animations, en déclarant 3 choses dans les styles CSS de la page : L'état initial, les clefs de l'animation, et l'état final de / des éléments concernés.

Un exemple : afficher 3 photos en pile, chacune tournée de quelques degrés par rapport aux autres, histoire de donner l'effet d'un tas de photo, et lorsque la souris rentre dans le container des photos, les « déplier » grâce à une animation CSS3.

Tout d'abord, le code HTML :

<div class="album">

   <img src="images/photo1.jpg" class="photo1" alt="Photo 1" />

   <img src="images/photo2.jpg" class="photo2" alt="Photo 2" />

   <img src="images/photo3.jpg" class="photo3" alt="Photo 3" />

</div>

Ensuite, dans la feuille de styles, on donne un look à nos images et on défini le bloc qui contient les photos, pour faire de la place à notre animation :

.album {

   position: relative; margin-left: 60px;

   width: 250px; height: 200px; vertical-align: top;

}

.album img {

   position: absolute; top: 0; left: 0; border: 5px solid #f3f3f3;

   width: 200px; height: 200px; display: block;

   box-shadow: 2px 2px 4px #666;

   -webkit-box-shadow: 2px 2px 4px #666;

   -moz-box-shadow: 2px 2px 4px #666;

}

NB : les propriétés -shadow permettent de projeter l'ombre de la photo. Il faut définir la propriété qui correspond à chaque type de navigateur (webkit, gecko) en plus de la déclaration standard pour être sûr que le style sera appliqué quelque soit le navigateur du visiteur. Il en sera de même pour les différentes déclarations inhérentes à l'animation CSS3.

Une fois les photos stylées, il faut définir les différents angles et positions de départ de l'animation, toujours coté CSS :

.album .photo1 {

   -webkit-transform: rotate(-3deg) translate(-4px, 0px) scale(1.0);

   -moz-transform: rotate(-3deg) translate(-4px, 0px) scale(1.0);

   -o-transform: rotate(-3deg) translate(-4px, 0px) scale(1.0);

   -ms-transform: rotate(-3deg) translate(-4px, 0px) scale(1.0);

}

.album .photo2 { /* la 2nde photo reste tel quel */ }

.album .photo3 {

   -webkit-transform: rotate(3deg) translate(4px, 0px) scale(1.0);

   -moz-transform: rotate(3deg) translate(4px, 0px) scale(1.0);

   -o-transform: rotate(3deg) translate(4px, 0px) scale(1.0);

   -ms-transform: rotate(3deg) translate(4px, 0px) scale(1.0);

}

La 1ère photo sera donc décalée de 4 pixels à gauche, et tournée de 4 degrés dans le sens anti horaire. La 2nde reste à sa place, sans rotation. La 3ème est décalée de 4 pixels à droite, et tournée de 4 degrés dans le sens horaire. L'échelle (scale) des photos ne change pas.

Il va falloir ensuite définir des clefs d'animation, toujours et encore dans la feuille de styles CSS :

@-webkit-keyframes image1 {

   0% { -webkit-transform: rotate(0deg) translate(0, 0) scale(1.0); }

   100% { -webkit-transform: rotate(-6deg) translate(-100px, 4px)   scale(1.1); }

}

@-moz-keyframes image1 {

   0% { -moz-transform: rotate(0deg) translate(0, 0) scale(1.0); }

   100% { -moz-transform: rotate(-6deg) translate(-100px, 4px) scale(1.1); }

@-o-keyframes image1 {

   0% { -o-transform: rotate(0deg) translate(0, 0) scale(1.0); }

   100% { -o-transform: rotate(-6deg) translate(-100px, 4px) scale(1.1); }

}

@-webkit-keyframes image2 {

   0% { -webkit-transform: rotate(0deg) translate(0, 0) scale(1.0); }

   100% { -webkit-transform: rotate(0deg) translate(0, 4px) scale(1.1); }

}

@-moz-keyframes image2 {

   0% { -moz-transform: rotate(0deg) translate(0, 0) scale(1.0); }

   100% { -moz-transform: rotate(0deg) translate(0, 4px) scale(1.1); }

}

@-o-keyframes image2 {

   0% { -o-transform: rotate(0deg) translate(0, 0) scale(1.0); }

   100% { -o-transform: rotate(0deg) translate(0, 4px) scale(1.1); }

}

@-webkit-keyframes image3 {

   0% { -webkit-transform: rotate(0deg) translate(0, 0) scale(1.0); }

   100% { -webkit-transform: rotate(6deg) translate(100px, 4px) scale(1.1); }

}

@-moz-keyframes image3 {

   0% { -moz-transform: rotate(0deg) translate(0, 0) scale(1.0); }

   100% { -moz-transform: rotate(6deg) translate(100px, 4px) scale(1.1); }

}

@-o-keyframes image3 {

   0% { -o-transform: rotate(0deg) translate(0, 0) scale(1.0); }

   100% { -o-transform: rotate(6deg) translate(100px, 4px) scale(1.1); }

}

On indique via ces déclarations l'état initial et l'état final de l'animation. Les différents états sont nommés image1, image2, image3.

Enfin, il va falloir faire correspondre les états ainsi nommées aux classes CSS pour déclencher l'animation sur lorsque la souris rentre dans le container (grâce aux sélecteurs CSS :hover et :focus) et l'état final en terme de transformation (rotate, translate et scale) :

.album:hover .photo1, .album:focus .photo1 {

   -webkit-animation-name: image1; -webkit-animation-duration: .2s;

   -webkit-transform: rotate(-6deg) translate(-100px, 4px) scale(1.1);

   -moz-animation-name: image1; -moz-animation-duration: .2s;

   -moz-transform: rotate(-6deg) translate(-100px, 4px) scale(1.1);

   -o-animation-name: image1; -o-animation-duration: .2s;

   -o-transform: rotate(-6deg) translate(-100px, 4px) scale(1.1);

   -ms-transform: rotate(-6deg) translate(-100px, 4px) scale(1.1);

}

.album:hover .photo2, .album:focus .photo2 {

   -webkit-animation-name: image2; -webkit-animation-duration: .2s;

   -webkit-transform: rotate(0deg) translate(0, 4px) scale(1.1);

   -moz-animation-name: image2; -moz-animation-duration: .2s;

   -moz-transform: rotate(0deg) translate(0, 4px) scale(1.1);

   -o-animation-name: image2; -o-animation-duration: .2s;

   -o-transform: rotate(-6deg) translate(-100px, 4px) scale(1.1);

  -ms-transform: rotate(0deg) translate(0, 4px) scale(1.1);

}

.album:hover .photo3, .album:focus .photo3 {

   -webkit-animation-name: image3; -webkit-animation-duration: .2s;

   -webkit-transform: rotate(6deg) translate(100px, 4px) scale(1.1);

   -moz-animation-name: image3; -moz-animation-duration: .2s;

   -moz-transform: rotate(6deg) translate(100px, 4px) scale(1.1);

   -o-animation-name: image3; -o-animation-duration: .2s;

   -o-transform: rotate(-6deg) translate(-100px, 4px) scale(1.1);

   -ms-transform: rotate(6deg) translate(100px, 4px) scale(1.1);

}

Une fois ceci fait, la feuille de styles est complète, les 3 photos sont disposées en pile et l'entrée de la souris dans le container va déclencher l'animation formalisée en CSS3.

Pour voir le rendu de l'exemple décrit ci-dessus : Amicale des anciens de Belley

Source : Blog de David Walsh