Animierte Bildershow

[Jens Gerlach]

Ich 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;
}