nicht angemeldet
Hallo Marc!
Ich sitze hier in einer Firma, deren Homepage ich machen soll. Ich verschwende jetzt schon seit zehn Tagen Stunden um Stunden meiner Arbeitszeit damit, den lächerlichen Austausch von drei popligen Bildern hinzubekommen. Als animated Gif (Photoshop und auch andere Programme) habe ich es auch nicht hingekriegt, weil das wegen der Transparenzen oder auch Farben immer mies aussah. Genau deshalb will ich es ja mit CSS machen. Und nein, ich habe bestimmt schon lange nicht mehr den Ehrgeiz, es selbst hinzubekommen, und es ist mir mittlerweile auch völlig egal, ob ich dann stolz auf mich sein kann, oder nicht.
Ich verstehe mittlerweile übrigens überhaupt nichts mehr (und mein Kollege (Informatiker/Mathematiker), den ich auch immer zu Rate ziehe, auch nicht), denn einmal denke ich, das Erscheinen der Bilder hat was mit dem Delay zu tun, aber dann soll ich wieder was mit den Keyframes machen. Nach meinem ursprünglichen Verständnis hat das mit den Keyframes nur was mit dem Fading eines Bildes von 0 bis 1 bis wieder 0 zu tun und nicht mit dem unterschiedlichen Erscheinen der drei Bilder nacheinander.
Kann mir denn nicht bitte bitte bitte irgendeiner hier bei meinem anderen Script, das ich hier schon gepostet hatte, bei dem ja schon fast alles funktioniert hatte, nur noch sagen, welche Codezeile darin noch wie falsch ist? Der einzige Fehler hierbei ist, dass im allerersten Durchgang das Fading nicht ganz stimmt. Nach dem langsamen Verschwinden eines Bildes erscheint aprupt das nächste anstatt langsam fadend zu erscheinen. In allen weiteren Durchgängen der Animation stimmt dann alles. (In diesem Script verstehe ich die verschiedenen Keyframezahlen übrigens wieder überhaupt nicht, aber trotzdem machen sie genau das gleiche wie im anderen Script.)
Hier noch mal das Script:
#gallery {
position: relative;
}
#gallery figure {
position: absolute;
top: 0;
left: 0;
z-index: 1;
}
#gallery figure {
animation: wechseln 15s infinite;
}
@keyframes wechseln {
0% {opacity: 1;}
25% {opacity: 1;}
40% {opacity: 0;}
92% {opacity: 0;}
100% {opacity: 1;}
}
#gallery figure:nth-of-type(2) {
animation-delay: 5s;
opacity: 0;
}
#gallery figure:nth-of-type(1) {
animation-delay: 10s;
opacity: 0;
}
</style>
</head>
<body>
<div id="gallery">
<figure>
<img src="FSP-Eigenschaften1.png" alt="bild1">
</figure>
<figure>
<img src="FSP-Eigenschaften2.png" alt="bild2">
</figure>
<figure>
<img src="FSP-Eigenschaften3.png" alt="bild3">
</figure>
</div>
Und hier das Ergebnis:
marctrix
Gunnar Bittersmann
JürgenB
Auge
Henry
Matthias Apsel