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="https://ekladata.com/O5_WAkcg-AGD3x4KGhSUDhT7TCE.jpg"><img style="width:60vw;" src="https://ekladata.com/YEHleVnzDQA5iLnlqz9pqlMnmJ0.jpg"><img style="width:60vw;" src="https://ekladata.com/f6xtHmvwfFAuhfy9iIFo_NQkYzM.jpg"><img style="width:60vw;" src="https://ekladata.com/HFvI8OthOrIdskCnEkXDXsFPSVo.jpg"><img style="width:60vw;" src="https://ekladata.com/FuZPWiFPyYBYez8KBoy6ghsR9VU.jpg"><br><img style="width:60vw;" src="https://ekladata.com/Hpi6TiyWvy5v7inbBMmB0URUV5s.jpg"><img style="width:60vw;" src="https://ekladata.com/dDA0l2UIi9QFmQNSoRpffiqbNgc.jpg"><img style="width:60vw;" src="https://ekladata.com/iEKSg9-BKpbJoF5X5uTq2z64FKM.jpg"><img style="width:60vw;" src="https://ekladata.com/ndjVa55mXtcNeNxjlmYIaB2yUSI.jpg"><img style="width:60vw;" src="https://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>