infinit logo roll

by Petr Haluza

HTML

<div class="slider">
	
		<div class="slide"><img src="https://cdn.alza.cz/images/web-static/eshop-logos/alza_cz.svg"></div>
      <div class="slide"><img src="https://a.allegroimg.com/original/343297/28c4320247179d1326a0c73a423e/logo-allegro-bcec72b532"></div>
			<div class="slide"><img src="https://www.datart.cz/shop/assets/frontend/microsite-1.34.0/img//logo/datart-logo.svg"></div>
      <div class="slide"><img src="https://www.mironet.cz/img4/logo_mironet_c.png"></div>

</div>

CSS

body {  margin: 0;  padding: 0;}



@keyframes show1 {
  0% { opacity: 0 }
	5% { opacity: 1 }
	25% { opacity: 1 }
  30% { opacity: 0 }
}


.slider { position: relative; background: white; border: 2ps solid red; width: 100px; height:35px}
.slide img { width:100%}
.slide {  position: absolute; opacity: 0; width: 100px; height:35px; display:flex; align-items: center}
.slide:nth-child(1) {animation: show1 6s linear infinite; animation-delay:0s}
.slide:nth-child(2) {animation: show1 6s linear infinite; animation-delay:1.5s}
.slide:nth-child(3) {animation: show1 6s linear infinite; animation-delay:3s}
.slide:nth-child(4) {animation: show1 6s linear infinite; animation-delay:4.5s}