mouvement gif dans page

, 06:10am

Publié par Pourquoi pas 732

La petite abeille a été rajoutée ensuite, après avoir manipulé les animations...
Je ne sais pas ce que vous en pensez mais je trouve ça sympa !

Survolez chaque vignette pour l'agrandir...Le code
<p>
    <img class="animal" src="http://www.turbophoto.com/Free-Stock-Images/Images/Berries%20(1).jpg" style="width: 100px; margin: 0px 0px 0px 50px;" /> <img class="animal" src="http://www.turbophoto.com/Free-Stock-Images/Images/Bradford%20Pear%20Tree%20Blossoms%201.jpg" style="width: 100px;" /> <img class="animal" src="http://www.turbophoto.com/Free-Stock-Images/Images/Crocus%205.jpg" style="width: 100px;" /> <img class="animal" src="http://www.turbophoto.com/Free-Stock-Images/Images/Daffodils%201.jpg" style="width: 100px;" /> <img class="animal" src="http://www.turbophoto.com/Free-Stock-Images/Images/Bradford%20Pear%20Tree%202.jpg" style="width: 100px;" />
  </p>
<style type="text/css"><!--
.animal {
   -webkit-transition: -webkit-transform 2000ms ease-out 40ms;
   -moz-transition: -moz-transform 2000ms ease-out 40ms;
}
.animal:hover {
  -webkit-transform: scale(2.8) translate(0px, 25px);
  -moz-transform: scale(2.8) translate(0px, 25px);
--></style>

explications:
le premier paragraphe comporte les adresses des 5 photos, redimensionnées à 100px de large et toutes identifiées en "animal" ! (ne me demandez pas pourquoi: un instant de folie, sans doute !)
Le paragraphe suivant concerne la transition en webkit et en moz; la vitesse de changement est de 2 secondes selon une évolution de la courbe "ease-out"
Au survol (:hover), les mouvements à effectuer: scale x 2.8 (tripler les dimensions) et déplacement de 0px en horizontal et de 25px en vertical.
Sympa, non ?