Ico JavaScript
Ico CSS
Ico HTML
Ico mooTools
Ico PHP
Ico Astuces

Animation d'élements en CSS3

Date 09/09/2012
Ico CSS
Comms 3 commentaires

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



Vous avez aimé ce billet ?

 

Vous aimerez peut être...
> ComboBox pour envoi de fichiers
> ComboxBox de choix d'images
> Génération d'une bannière texte
> Maintenir une session PHP active via Request
> mooTools v1.3 : Nouveautés
 

Mot-clefs de ce billet...
animation rotate scale transform translate webkit

Commentaires


phpboy   25/10/2012 12:37:20
Sympathique !
Quelques soucis dans l'animation : la position d'origine n'est pas respectée dans les clefs de l'animation...
LoL   13/10/2013 11:38:43
Je ne connaissais pas le css5 xD
Mike   29/11/2013 14:50:41
Oooops... je corrige cette grossière faute (entorse neuronale).

Ajouter un commentaire


La validation des commentaires se fait automatiquement, suite à la validation d'un « captcha » qui permet de filtrer le spam. La publication de votre commentaire se fera ensuite automatiquement. L'administrateur du blog se réserve toutefois le droit de supprimer votre commentaire après publication s'il contrevient à nos condition d'utilisation ou s'il est considéré comme spam.

Auteur
Email
 
(facultatif et caché)
Site web
 
(facultatif)
Message

Ico Valider


MP  Mighty Productions
> Blogs
> Partage de codes sources - PHP / JS / mooTools
> CSS
> Animation d'élements en CSS3
 
RSS       Mentions légales       Comms  Haut de la page  
◄ ►