Frage zum Wiki-Artikel „Bildwechsler“

[Gunnar Bittersmann]

@@Thomas

@keyframes bildwechsler
{
	  0% { opacity: 0 }
	 20% { opacity: 0 }
	 40% { opacity: 1 }
	 60% { opacity: 1 }
	 80% { opacity: 0 }
	100% { opacity: 0 }
}

Das tut folgendes: Am Anfang ist die Opazität 0, d.h. das Ding transparent, also nicht sichtbar. Nach 20% der Dauer der Animation immer noch. Nach 40% der Dauer der Animation ist die Opazität 1, d.h. das Ding ist nicht transparent, sondern sichtbar. Nach 60% immer noch. Nach 80% nicht mehr. Am Ende auch nicht.

Wozu nun die ganzen Werte; reichen nicht auch 0%, 40%, 60%, 100%? Nein, das wäre ein anderer Übergang. Der soll sich zwischen 20% und 40% bzw. zwischen 60% und 80% abspielen. Aufgemalt:

(Der Defaultwert der animation-timing-function-Eigenschaft ist ease, also ein allmählicher Übergang, kein Sprung.)

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?

Die Animation lässt du nun wiederholen. Für die anderen beiden Bilder jeweils zeitversetzt: fürs eine um ein Drittel der Periodendauer (Dauer einer Animation), fürs andere um zwei Drittel der Periodendauer. Aufgemalt:

LLAP 🖖