Bilder unterschiedliche Zeitdauer ein-ausblenden
Hi to @ll,
wie kann man z.B. 5 Bilder unterschiedlich nacheinander ein-/ausblenden?
Also:
Bild1 -> 10 sec einblenden, danach ausblenden es folgt
Bild2 -> 20 sec einblenden,danach ausblenden es folgt
Bild3 -> 5 sec einblenden,danach ausblenden es folgt
Bild4 -> 20 sec einblenden,danach ausblenden es folgt
Bild5 -> 10 sec einblenden,danach wieder von vorne.
Der hier verwendete Code
<style>
#conti{
position:absolute;
top:50px;
left:50px;
width:80%;
height:80%;
animation: wechsel 15s infinite;
}
@keyframes wechsel{
0%,100%{
background-image:url('/image/14.png');
background-size:cover;
}
20%{
background-image:url('/image/10.png');
background-size:cover;
}
40%{
background-image:url('/image/11.png');
background-size:cover;
}
60%{
background-image:url('/image/12.png');
background-size:cover;
}
80%{
background-image:url('/image/13.png');
background-size:cover;
}
}
</style>
<div id="conti">
</div>