Habe eine HTML5-Datei die zwei Grafiken mittels img Befehl darstellt. So weit kein Fehler.
In der CSS-Datei habe ich die Befehle Keyframes und Animation.
Irgendwie klappt das nicht.
Woran kann das liegen?
Verwende Mozilla Firefox 12 und Chrom 18.
Vielen Dank
HTML
<!DOCTYPE html>
<html>
<head>
<title>Beispiele</title>
<meta charset="UTF-8">
<link href="beispiele.css" type="text/css" rel="stylesheet">
</head>
<body>
<h1>Keyframes - Automatische Bildergalerie</h1>
<img id="bild1" src="bilder/bowling.jpg"/>
<img id="bild2" src="bilder/billard.jpg"/>
</body>
</html>
Alles anzeigen
CSS
@-webkit-keyframes einblenden {
0% {
left: 20px;
width: 100px;
}
100% {
left: 250px;
width: 450px;
top: 75px;
}
}
#bild1, #bild2 {
width: 100px;
position: absolute;
left: 20px;
}
#bild1 {
top: 75px;
-webkit-animation: enblenden 2s 2s 2 alternate;
-moz-animation: enblenden 2s 2s 2 alternate;
}
#bild2 {
top: 195px;
-webkit-animation: enblenden 2s 4s 2 alternate;
-moz-animation: enblenden 2s 4s 2 alternate;
}
Alles anzeigen
Habe den Code wie folgt geändert und jetzt geht es. Ich sehe auch den -MOZ-Zeilen keine Veränderung. Selbst, wenn ich diese rausnehme geht es in Chrome immer noch einwandfrei. Hier nochmal der Code, der jetzt geht. Danke für die Hilfe.
HTML
<!DOCTYPE html>
<html>
<head>
<title>Beispiele</title>
<meta charset="UTF-8">
<link href="beispiele.css" type="text/css" rel="stylesheet">
</head>
<body>
<h1>Keyframes - Automatische Bildergalerie</h1>
<img id="bild1" src="bilder/bowling.jpg" />
<img id="bild2" src="bilder/billard.jpg" />
</body>
</html>
Alles anzeigen
CSS
@-webkit-keyframes einblenden {
0% {
left: 20px;
width: 100px;
}
100% {
left: 150px;
top: 75px;
width: 450px;
}
}
@-moz-keyframes einblenden {
0% { left: 20px;
width: 100px;
}
100% { left: 150px;
top: 75px;
width: 450px;
}
}
#bild1, #bild2 {
width: 100px;
position: absolute;
left: 20px;
}
#bild1 {
top: 75px;
-webkit-animation: einblenden 2s 2s 2 alternate;
-moz-animation: einblenden 2s 2s 2 alternate;
}
#bild2 {
top: 125px;
-webkit-animation: einblenden 2s 4s 2 alternate;
-moz-animation: einblenden 2s 4s 2 alternate;
-ms-animation: einblenden 2s 4s 2 alternate;
}
Alles anzeigen