nicht angemeldet
Hallo Marc!
Zunächst mal vielen Dank, dass Du Dir so viel Mühe mit mir gibst.
Dennoch komme ich leider immer noch nicht den geringsten Schritt weiter.
(Ich arbeite übrigens mit Dreamweaver, bei dem ich mir wunderbar mit einem Tastendruck immer das Ergebnis anschauen kann. Deshalb und weil ich mich ungern im Internet irgendwo anmelde und nicht noch mehr Tage damit verschwenden will, mich auch noch mit einer Entwicklerumgebung auseinanderzusetzen, sehe ich jetzt für mich nicht den großen Vorteil eines Codepen.)
Hier zunächst mal wieder mein neuestes Script:
div { position: relative }
img {
animation-name: bildwechsler;
animation-duration: 6s;
animation-iteration-count: infinite;
position: absolute;
}
img:nth-of-type(2)
{
animation-delay: 2;
}
img:nth-of-type(3)
{
animation-delay: 4;
}
@keyframes bildwechsler
{
0% { opacity: 0 }
20% { opacity: 0 }
40% { opacity: 1 }
60% { opacity: 1 }
80% { opacity: 0 }
100% { opacity: 0 }
}
</style>
</head>
<body>
<div>
<img src="FSP-Eigenschaften1.png">
<img src="FSP-Eigenschaften2.png">
<img src="FSP-Eigenschaften3.png">
</div>
Und hier wieder das (immer gleiche) Ergebnis:
http://www.fotosatzpfeifer.de/html/test_bildwechsel4d.html
Ich sage Dir jetzt, was ich verstehe und was ich nicht verstehe.
Ich verstehe, dass ich mit "animation-name" meine Animation jetzt "bildwechsler" genannt habe.
Ich verstehe, dass die Animation insgesamt 6 Sekunden läuft (vom leeren Bildschirm über das langsame Erscheinen der Bilder, deren langsames Verschwinden und wieder bis zum leeren Bildschirm). (Dass 6 Sekunden eigentlich viel zu schnell für meine Zwecke wären, spielt jetzt erst mal überhaupt keine Rolle. Eigentlich sollte jedes meiner 3 Bilder vielleicht ca. 6 Sekunden lang zu sehen sein, aber um es zu testen, muss ich so wenigstens nicht so lange warten.)
Ich verstehe, dass ich mit "animation-iteration-count" meine Animation sich unendlich oft wiederholen lasse.
Ich verstehe, dass "img:nth-of-type(2)" mein zweites Bild betreffen soll. Aber völlig egal, was ich dann dort bei "animation-delay", von dem ich verstehe, dass es in Sekunden angegeben meine Animation verzögern soll, eingebe, es ändert sich nichts. Ich dachte, dass ich hier bestimmen könnte, wann das zweite Bild erscheint, aber Pustekuchen. Diese Teile meines CSS-Scripts sind also komplett nichtig.
Ich verstehe, dass "@keyframes" das Fading über die ganze Animation hinweg verursacht (das ich ja eigentlich gar nicht bräuchte, aber es ist ganz nett).
Aber ich bin anscheinend noch Kilometer davon entfernt, zu verstehen, wie ich Bild 2 sage, dass es erst nach 2 Sekunden erscheinen und nach 4 Sekunden wieder verschwinden soll, während Bild 1 beim Erscheinen von Bild 2 wieder verschwinden soll. Und Bild 3 soll nach 4 Sekunden erscheinen und damit Bild 2 verschwinden.
Dass ich das Verschwinden und Erscheinen wohl mit "opacity: 1" bzw. "opacity: 0" machen soll, ist mir auch klar, aber wie soll ich das den einzelnen Bildern zuordnen und das auch noch mit 1 oder 0 zu den verschiedenen Zeitpunkten?
Egal, was ich an meinem Script verändere, das Ergebnis ist immer das gleiche. Alle Bilder stehen übereinander, und ein Bildwechsel findet nicht statt. Ich verstehe nun halbwegs die Animation, aber die Animation ist ja eigentlich gar nicht das Problem, sondern der völlig fehlende Bildwechsel.
marctrix
Gunnar Bittersmann
JürgenB
Auge
Henry
Matthias Apsel