Du bist nicht angemeldet.

Lieber Besucher, herzlich willkommen bei: HTML, CSS und PHP Forum - HTML Tutorial. Falls dies dein erster Besuch auf dieser Seite ist, lies bitte die Hilfe durch. Dort wird dir die Bedienung dieser Seite näher erläutert. Darüber hinaus solltest du dich registrieren, um alle Funktionen dieser Seite nutzen zu können. Benutze das Registrierungsformular, um dich zu registrieren oder informiere dich ausführlich über den Registrierungsvorgang. Falls du dich bereits zu einem früheren Zeitpunkt registriert hast, kannst du dich hier anmelden.

thl1966

ist noch ganz neu

  • »thl1966« ist der Autor dieses Themas

Beiträge: 3

Wohnort: Südpfalz

Beruf: Selbstständig im IT-Bereich (Support, Netzwerke, Datenbanken, Hard- und Software)

  • Private Nachricht senden

1

Freitag, 27. April 2012, 13:51

CSS - Keyframes-Darstellung funktioniert nicht

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
<!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>


Cascading Style Sheet

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
@-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;
}


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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
<!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>



Cascading Style Sheet

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
@-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;
}

Dieser Beitrag wurde bereits 2 mal editiert, zuletzt von »thl1966« (27. April 2012, 15:33)


2

Freitag, 27. April 2012, 14:20

probiere mal das foglende:

Cascading Style Sheet

1
2
3
4
5
#bild1, #bild2
{
	-webkit-animation: einblenden 2s 2s 2 alternate;
	-moz-animation: einblenden 2s 2s 2 alternate;
}

-> die animation heißt "einblenden" ....

Wenn das nicht geht, bitte noch zusätzlich:

Cascading Style Sheet

1
2
3
4
5
#bild1, #bild2
{
	-webkit-animation: einblenden 2s 2s 2s alternate;
	-moz-animation: einblenden 2s 2s 2s alternate;
}


Bin aber in Keyframes nicht up to date,
Daher bin ich mir mit meinem zweiten Schrift nicht sicher ;)
freundliche Grüße
phip1611

Dieser Beitrag wurde bereits 3 mal editiert, zuletzt von »drPHIP132« (27. April 2012, 14:25)