• Exemple 50

    Exemple avec 6 images au ratio 16/9, redimensionnées par le code en 1152x648px: arrêt au survol.

     

     


    <div style="width: 1152px; height: 648px; margin: 5px auto; border: 1px solid black; text-align: left;">
    <p id="dde">&nbsp;</p>
    <p id="anim">&nbsp;</p>
    </div>
    <style><!--
    #dde{position:absolute; z-index:10; width:1152px; height:648px;}
    #anim{position:absolute; z-index:1; width:1152px; height:648px; background-size:cover;}
    #anim {animation:aout 12s linear infinite normal; animation-play-state:running;}
    @keyframes aout{
    0% {background:url('http://ekladata.com/3VqMDwNJeaNFD5M33Le0GihvriY@1152x648.jpg');}
    25% {background:url('http://ekladata.com/jmvchOxJvwl79m3J76gzM2W0dZQ@1152x648.jpg');}
    37% {background:url('http://ekladata.com/Cy6oWff7qpGHs7XHYJ3_3kvhv2A@1152x648.jpg');}
    53% {background:url('http://ekladata.com/rHhFgilHYsyyWGOwHiNGzhp_Usk@1152x648.jpg');}
    70% {background:url('http://ekladata.com/2VHN01THYnxiRRIVjA8J1W0G2zE@1152x648.jpg');}
    87% {background:url('http://ekladata.com/HBVPcufX566fIghZmU_vo3XVvlo@1152x648.jpg');}
    100% {background:url('http://ekladata.com/HBVPcufX566fIghZmU_vo3XVvlo@1152x648.jpg');}
    }
    #dde:hover ~ #anim{animation-play-state:paused;}
    --></style>