Gunnar Bittersmann: Frage zum Wiki-Artikel „Bildwechsler“

Beitrag lesen

problematische Seite

@@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 🖖

--
„Wer durch Wissen und Erfahrung der Klügere ist, der sollte nicht nachgeben. Und nicht aufgeben.“ —Kurt Weidemann
0 55

Frage zum Wiki-Artikel „Bildwechsler“

Thomas
  • css
  • frage zum wiki
  1. 0
    marctrix
    1. 0
      Thomas
      1. 0
        marctrix
        1. 0
          Thomas
  2. 0
    Gunnar Bittersmann
    1. 0
      marctrix
      1. 0
        marctrix
      2. 0
        Gunnar Bittersmann
        1. 0
          Thomas
          1. 0
            JürgenB
            1. 0
              Thomas
          2. 0
            Gunnar Bittersmann
            1. 0
              Thomas
              1. 0
                marctrix
              2. 0
                Gunnar Bittersmann
                • css
                • html
                1. 0
                  Thomas
                  1. 0
                    marctrix
                    1. 0
                      Thomas
                      1. 0
                        marctrix
                        1. 0
                          Thomas
                          1. 0
                            Auge
                            1. 0
                              Gunnar Bittersmann
                              • design
                          2. 0
                            marctrix
                            1. 0
                              Thomas
                          3. 3
                            Gunnar Bittersmann
                            1. 0
                              Thomas
                              1. 0
                                Auge
                                1. 0
                                  Thomas
                                2. 1
                                  Roger Rabbit von Plid
                              2. 1
                                marctrix
                                1. 0
                                  Thomas
                                  1. 0
                                    JürgenB
                                    1. 0
                                      Thomas
                                      1. 0
                                        JürgenB
                                      2. 0
                                        marctrix
                                        1. 3
                                          Henry
                                          1. 0
                                            marctrix
                                            1. 0
                                              Henry
                                  2. 2
                                    Gunnar Bittersmann
                                    1. 0
                                      Thomas
                                  3. 2
                                    marctrix
                                    1. 0
                                      marctrix
                                      1. 0
                                        Thomas
                                        1. 0
                                          marctrix
                                          1. 0
                                            Thomas
                                            1. 0
                                              marctrix
                        2. 1
                          Gunnar Bittersmann
          3. 0
            marctrix
            1. 0
              Gunnar Bittersmann
              1. 0
                marctrix
                1. 0
                  Matthias Apsel
                  • menschelei
                  1. 0
                    marctrix
                    1. 0
                      Gunnar Bittersmann
                      1. 0
                        marctrix