Animierte Bildershow
bearbeitet von Matthias ApselIch möchte eine animierte Bildershow auf meiner Webseite einrichten. Ich habe mich dabei von dem Nürnberg-Beispiel inspirieren lassen. Ich habe es auf 10 Bilder erweitert. Leider läuft die Animation nur einmal durch und bleibt dann beim ersten Bild hängen. Kann mir jemand sagen, was ich falsch mache?
Die Zeiten sind für den Test bewust so klein gewählt.
Beispiel siehe hier: http://www.gerlach-j.de/Kopie-index.html
**HTML-Code:**
style="vertical-align: top; text-align: center; width: 610px;">
<figure id="gallery"><figure><img
src="show/01.JPG"></figure><figure><img
src="show/02.JPG"></figure><figure><img
src="show/03.JPG"></figure><figure><img
src="show/04.JPG"></figure><figure><img
src="show/05.JPG"></figure><figure><img
src="show/06.JPG"></figure><figure><img
src="show/07.JPG"></figure><figure><img
src="show/08.JPG"></figure><figure><img
src="show/09.JPG"></figure><figure><img
src="show/10.JPG"></figure> </figure>
**CSS:**
#gallery {
position: relative;
margin: 0;
background: none;
border: none;
}
#gallery figure {
position: absolute;
display: inline-block;
animation-name: wechseln;
animation-duration: 10s;
animation-iteration-count: infinitive;
}
#gallery figure:last-of-type {
position: relative;
}
@keyframes wechseln {
0% {
opacity: 0;
}
10% {
opacity: 1;
}
90% {
opacity: 1;
}
100% {
opacity: 0;
}
}
#gallery figure:nth-of-type(2) {
animation-delay: 1s;
opacity: 0;
}
#gallery figure:nth-of-type(3) {
animation-delay: 2s;
opacity: 0;
}
#gallery figure:nth-of-type(4) {
animation-delay: 3s;
opacity: 0;
}
#gallery figure:nth-of-type(5) {
animation-delay: 4s;
opacity: 0;
}
#gallery figure:nth-of-type(6) {
animation-delay: 5s;
opacity: 0;
}
#gallery figure:nth-of-type(7) {
animation-delay: 6s;
opacity: 0;
}
#gallery figure:nth-of-type(8) {
animation-delay: 7s;
opacity: 0;
}
#gallery figure:nth-of-type(9) {
animation-delay: 8s;
opacity: 0;
}
#gallery figure:nth-of-type(10) {
animation-delay: 9s;
opacity: 0;
}