• Animation

    Je n'ai pas l'habitude de proposer des animations qui "tournent" toute seule mais il faut bien changer !

    De plus, vous pouvez arrêter l'animation en la survolant.

    Dans ce montage, 10 images dimensionnées en 60% de votre écran, ce qui n'est qu'un exemple adaptable.


    <div style="position:relative;width:60vw; height:33.75vw; border:0.4vh ridge white; margin:1vh auto; overflow:hidden;">
    <p id="print"><img style="width:60vw;" src="http://ekladata.com/O5_WAkcg-AGD3x4KGhSUDhT7TCE.jpg"><img style="width:60vw;" src="http://ekladata.com/YEHleVnzDQA5iLnlqz9pqlMnmJ0.jpg"><img style="width:60vw;" src="http://ekladata.com/f6xtHmvwfFAuhfy9iIFo_NQkYzM.jpg"><img style="width:60vw;" src="http://ekladata.com/HFvI8OthOrIdskCnEkXDXsFPSVo.jpg"><img style="width:60vw;" src="http://ekladata.com/FuZPWiFPyYBYez8KBoy6ghsR9VU.jpg"><br><img style="width:60vw;" src="http://ekladata.com/Hpi6TiyWvy5v7inbBMmB0URUV5s.jpg"><img style="width:60vw;" src="http://ekladata.com/dDA0l2UIi9QFmQNSoRpffiqbNgc.jpg"><img style="width:60vw;" src="http://ekladata.com/iEKSg9-BKpbJoF5X5uTq2z64FKM.jpg"><img style="width:60vw;" src="http://ekladata.com/ndjVa55mXtcNeNxjlmYIaB2yUSI.jpg"><img style="width:60vw;" src="http://ekladata.com/wqcXt0Gjns6rX76l0hF5U80WN4I.jpg"></p>
    </div>
    <style><!--
    #print{width:300vw; height:67.5vw; animation:printemps 30s linear infinite; animation-play-state:running;}
    #print:hover{animation-play-state:paused;}
    @keyframes printemps{
    0% {transform:translate(0vw,0vw);}
    8% {transform:translate(0vw,0vw);}
    10% {transform:translate(-60vw,0vw);}
    18% {transform:translate(-60vw,0vw);}
    20% {transform:translate(-120vw,0vw);}
    28% {transform:translate(-120vw,0vw);}
    30% {transform:translate(-180vw,0vw);}
    38% {transform:translate(-180vw,0vw);}
    40% {transform:translate(-240vw,0vw);}
    48% {transform:translate(-240vw,0vw);}
    50% {transform:translate(-240vw,-33.75vw);}
    58% {transform:translate(-240vw,-33.75vw);}
    60% {transform:translate(-180vw,-33.75vw);}
    68% {transform:translate(-180vw,-33.75vw);}
    70% {transform:translate(-120vw,-33.75vw);}
    78% {transform:translate(-120vw,-33.75vw);}
    80% {transform:translate(-60vw,-33.75vw);}
    88% {transform:translate(-60vw,-33.75vw);}
    90% {transform:translate(0vw,-33.75vw);}
    98% {transform:translate(0vw,-33.75vw);}
    100% {transform:translate(0vw,0vw);}
    }
    --></style>