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;
}