arkadaşlar sitemde bir slideshow yaptım. 4 tane slide. 4 tane div aslında. bu dördünü loop yapamıyorum. tekil'ler için animation-iteration-count: infinite; yapmam bir şey ifade etmiyor. basit bir çözüm aslında ama kafamda durdu.

ister siteden bakın slide ve kodlara https://gtcyapi.com/beta1/

css'leri de şu şekilde

div.txt01 {animation:txt01 6s linear; animation-delay:004s; opacity:0; animation-fill-mode:forwards; position:absolute; bottom:0vh; width:100%; height:15vh; background:rgba(0,0,0,0.7)}
div.txt02 {animation:txt02 6s linear; animation-delay:012s; opacity:0; animation-fill-mode:forwards; position:absolute; bottom:0vh; width:100%; height:15vh; background:rgba(0,0,0,0.7)}
div.txt03 {animation:txt03 6s linear; animation-delay:020s; opacity:0; animation-fill-mode:forwards; position:absolute; bottom:0vh; width:100%; height:15vh; background:rgba(0,0,0,0.7)}
div.txt04 {animation:txt04 6s linear; animation-delay:028s; opacity:0; animation-fill-mode:forwards; position:absolute; bottom:0vh; width:100%; height:15vh; background:rgba(0,0,0,0.7)}

@keyframes txt01 {0% {opacity:0} 50% {opacity:1} 75% {opacity:1} 100% {opacity:0}}
@keyframes txt02 {0% {opacity:0} 50% {opacity:1} 75% {opacity:1} 100% {opacity:0}}
@keyframes txt03 {0% {opacity:0} 50% {opacity:1} 75% {opacity:1} 100% {opacity:0}}
@keyframes txt04 {0% {opacity:0} 50% {opacity:1} 75% {opacity:1} 100% {opacity:0}}

div.slide01 {background-image:url('images/slide01.jpg'); animation: slide01 4s linear; animation-delay:000s; z-index:-50; background-repeat: no-repeat; background-size:cover; background-position:center; height:100%; width:100%; position:absolute; top:0; left:0; opacity:0; animation-fill-mode:forwards; transform:scale(1.1,1.1)}
div.slide02 {background-image:url('images/slide02.jpg'); animation: slide02 4s linear; animation-delay:008s; z-index:-49; background-repeat: no-repeat; background-size:cover; background-position:center; height:100%; width:100%; position:absolute; top:0; left:0; opacity:0; animation-fill-mode:forwards; transform:scale(1.1,1.1)}
div.slide03 {background-image:url('images/slide03.jpg'); animation: slide03 4s linear; animation-delay:016s; z-index:-48; background-repeat: no-repeat; background-size:cover; background-position:center; height:100%; width:100%; position:absolute; top:0; left:0; opacity:0; animation-fill-mode:forwards; transform:scale(1.1,1.1)}
div.slide04 {background-image:url('images/slide04.jpg'); animation: slide04 4s linear; animation-delay:024s; z-index:-47; background-repeat: no-repeat; background-size:cover; background-position:center; height:100%; width:100%; position:absolute; top:0; left:0; opacity:0; animation-fill-mode:forwards; transform:scale(1.1,1.1)}

@keyframes slide01 {0% {opacity:0; -webkit-filter:blur(20px); transform:scale(1.0,1.0)} 75% {opacity:1} 100% {opacity:1}; transform:scale(1.1,1.1)}
@keyframes slide02 {0% {opacity:0; -webkit-filter:blur(20px); transform:scale(1.0,1.0)} 75% {opacity:1} 100% {opacity:1}; transform:scale(1.1,1.1)}
@keyframes slide03 {0% {opacity:0; -webkit-filter:blur(20px); transform:scale(1.0,1.0)} 75% {opacity:1} 100% {opacity:1}; transform:scale(1.1,1.1)}
@keyframes slide04 {0% {opacity:0; -webkit-filter:blur(20px); transform:scale(1.0,1.0)} 75% {opacity:1} 100% {opacity:1}; transform:scale(1.1,1.1)}