Du bist nicht angemeldet.

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)


drPHIP132

Web-Profi

Beiträge: 1 204

Wohnort: Sachsen, im Erzgebirge

  • Private Nachricht senden

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)