Transitions, transformations et animations en CSS3

Transition d'une image à l'autre au survol

Le balisage HTML

‹div id="fei1" >
‹img class="bottom" src="images/img_1.JPG" />
‹img class="top" src="images/img_2.JPG" />
‹/div>

Le CSS

#fei1{ position:relative; height:282px; width:500px; margin:0 auto; }
#fei1 img { position:absolute; left:0; -webkit-transition: opacity 1s ease-in-out; -moz-transition: opacity 1s ease-in-out; -o-transition: opacity 1s ease-in-out; -ms-transition: opacity 1s ease-in-out; transition: opacity 1s ease-in-out; }
#fei1img.top:hover { opacity:0; }

Transition d'une image à l'autre, quand un bouton est pressé

Cliques-moi

Ici au lieu d'utiliser la pseudo classe: hover , on utilise JavaScript et plus précisément jQuery.

Le Javascript

‹script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js" language="javascript" type="text/javascript" >
‹/script>
‹script language="javascript" type="text/javascript" >
$(document).ready(function() { $("#fei_onclick").click(function() { $("#fei2 img.top").toggleClass("transparent"); }); });
‹/script>

Le balisage HTML

‹div id="fei2" class="shadow">
‹img class="bottom" src="images/img_2.JPG" />
‹img class="top" src="images/img_3.JPG" />
‹/div>
‹p id="fei_onclick">Cliques-moi‹/p>

Le CSS

#fei2 { position:relative; height:479px; width:850px; margin:0 auto; }
#fei2 img { position:absolute; left:0; -webkit-transition: opacity 1s ease-in-out; -moz-transition: opacity 1s ease-in-out; -o-transition: opacity 1s ease-in-out; -ms-transition: opacity 1s ease-in-out; transition: opacity 1s ease-in-out; }
#fei2 img.transparent { opacity:0; }
#fei_onclick { cursor:pointer; }

Transition d'une image à l'autre avec une minuterie

C'est la même chose que dans la première transition, le sélecteur hover a été enlevé et le code CSS suivant a été ajouté:

@keyframes fei3FadeInOut {
0% { opacity:1;}
45% { opacity:1;}
55% { opacity:0;}
100% { opacity:0;}
}
#fei3 img.top { animation-name: fei3FadeInOut; animation-timing-function: ease-in-out; animation-iteration-count: infinite; animation-duration: 5s; animation-direction: alternate; }

Musatge