DIAPORAMA EN LIGNE
CODE :
<div style="width: 400px; height: 350px; overflow: hidden; box-shadow: 6px 6px 8px black; margin: 0 0 10px 150px;">
<p class="defil" style="width: 3150px; height: 350px; margin: 0 0 0 0;">
<img class="flr" style="border: 4px ridge grey;" src="https://ekladata.com/pourquoi-pas-732.eklablog.com/perso/2014/mai-2014/20.05.14/DSCN2001.JPG" alt="" />
<img class="flr" style="border: 4px ridge grey;" src="https://ekladata.com/pourquoi-pas-732.eklablog.com/perso/2014/mai-2014/20.05.14/DSCN2002.JPG" alt="" />
<img class="flr" style="border: 4px ridge grey;" src="https://ekladata.com/pourquoi-pas-732.eklablog.com/perso/2014/mai-2014/20.05.14/DSCN2003.JPG" alt="" />
<img class="flr" style="border: 4px ridge grey;" src="https://ekladata.com/pourquoi-pas-732.eklablog.com/perso/2014/mai-2014/20.05.14/DSCN2011.JPG" alt="" />
<img class="flr" style="border: 4px ridge grey;" src="https://ekladata.com/pourquoi-pas-732.eklablog.com/perso/2014/mai-2014/20.05.14/DSCN2039.JPG" alt="" />
<img class="flr" style="border: 4px ridge grey;" src="https://ekladata.com/pourquoi-pas-732.eklablog.com/perso/2014/mai-2014/20.05.14/DSCN2041.JPG" alt="" /></p>
</div>
<style type="text/css"><!--
.defil{
-webkit-animation: myfirst 15s linear .5s infinite alternate;
-moz-animation: myfirst 15s linear .5s infinite alternate;
-webkit-animation-play-state: running;
-moz-animation-play-state: running;
-webkit-animation-play-state: running;}
@-webkit-keyframes myfirst
{
0% { -webkit-transform:translate(0px,0px);}
10% { -webkit-transform:translate(0px,0px);}
90% { -webkit-transform:translate(-1940px,0px);}
100% { -webkit-transform:translate(-1940px,0px);}
}
@-moz-keyframes myfirst
{
0% { -moz-transform:translate(0px,0px);}
10% { -moz-transform:translate(0px,0px);}
90% { -moz-transform:translate(-1940px,0px);}
100% { -moz-transform:translate(-1940px,0px);}
}
.defil:hover{
-webkit-animation-play-state: paused;
-moz-animation-play-state: paused;}
.flr{
-webkit-transition:all 1s linear 1s;
-moz-transition:all 1s linear 1s;}
.flr:hover{
-webkit-transform:scale(1.5);
-moz-transform:scale(1.5);}
--></style>
