Art.20A.5.21

Toujours en suivant les codes indiqués ici: https://www.guyom-design.com/blog/astuces/css/tuto_diapo_css/#slider_auto

J'ai repris mes photos de l'hôtel Bakoua, en Martinique pour cet essai. Je voulais ajouter un arrêt au survol mais cela revient à bien modifier le code et comme je ne suis pas un adepte des animations automatiques.

<div id="car"><img src="http://ekladata.com/eAP_fiRk0MIVaqfx_zHZTBStldo.jpg" alt="" /><img src="http://ekladata.com/j2dI-9ry1Po4vCaVyq0Iq7qQJKQ.jpg" alt="" /><img src="http://ekladata.com/BLZxMrjcTY2i1hsvn9QOJypCGZo.jpg" alt="" /><img src="http://ekladata.com/Ol4R38pmU247NQf0S_uzWyF-eeU.jpg" alt="" /><img src="http://ekladata.com/xqQiMDkjSuJ9loMPrYq4PdQLbxA.jpg" alt="" /></div>

<style><!--
*{box-sizing: border-box }
img{max-width:100%;}
#car img{pointer-events:none;width:20%;height:100vh;object-fit:contain;float:left;}
#car{position: relative; width: 500%; animation: 30s animation_slide infinite;}
@keyframes animation_slide {
0% {left:0}
20%{left:0}/*image1*/

25%{left:-100%}
45%{left:-100%}/*image2*/

50%{left:-200%}
70%{left:-200%}/*image3*/

75%{left:-300%}/*image4*/
95%{left:-300%}

100%{left:-400%}/*image1*/}
--></style>