Matthias Scharwies: CSS-Animation transform:scale()

Servus!

Ich verzweifel grad: Bildwechsler

Ich will die Bilder nach hinten verschwinden lassen. Damit nach dem dritten Bild kein leerer Hintergrund zu sehen ist, ist das erste als 4. nochmal vorhanden. Der erste Durchlauf funktioniert, danach wird es immer chaotischer. Habt ihr eine Idee, warum es nicht funktioniert oder einen Verbesserungsvorschlag?

@keyframes wechseln {
    0% {opacity: 1; transform:scale(1,1);}
   25% {opacity: 1; transform:scale(1,1);}
   40% {opacity: 0; transform:scale(0,0);}
  100% {opacity: 0; transform:scale(0,0);}
}

#buehne figure:nth-of-type(4) {
  animation: wechseln 15s infinite;	
}

#buehne figure:nth-of-type(3) {
  animation: wechseln 15s infinite;	
  animation-delay: 5s;
}
#buehne figure:nth-of-type(2) {
  animation: wechseln 15s infinite;	
  animation-delay: 10s;
}

Vielen Dank im Voraus!

Matthias Scharwies

  1. Hallo Mattias

    Habt ihr eine Idee, warum es nicht funktioniert …

    Eine Software verwenden, die das automatisch richtig macht. ;)

    … oder einen Verbesserungsvorschlag?

    Anfang und Ende stimmen nicht überein. Lass den Abend in der dunklen Nacht verschwinden und den Morgen daraus wieder auftauchen.

    Mit besten Grüssen Richard

    1. Servus!

      Hallo Mattias

      Habt ihr eine Idee, warum es nicht funktioniert …

      Eine Software verwenden, die das automatisch richtig macht. ;)

      Flash?

      … oder einen Verbesserungsvorschlag?

      Anfang und Ende stimmen nicht überein.

      Hmm. Die Animation dauert 15s. Nr. 2 und 3 haben je 5s delay. Ich werde morgen versuchen, für jedes Bild einen eigenen keyframe zu schreiben. Vielleicht hilft das.

      Mit besten Grüssen Richard

      Matthias Scharwies

      1. Hallo Matthias

        Eine Software verwenden, die das automatisch richtig macht. ;) Flash?

        Was meinst du mit „Flash“? Wenn du SWF oder den Flash-Player meinst: Nein! Wenn du das Authoring-Tool meinst, wäre das ein Möglichkeit, damit können Animationen perfekt als HTLM5/CSS3/JavaScript exportiert werden.

        Ich werde morgen versuchen, für jedes Bild einen eigenen keyframe zu schreiben.

        Mit den Keyframes funktioniert die Animation. Das Problem schaffst du mit dem Einfügen des Bildes 1 als Bild 4.

        Mit besten Grüssen Richard

      2. Hallo Matthias

        Hmm. Die Animation dauert 15s. Nr. 2 und 3 haben je 5s delay. Ich werde morgen versuchen, für jedes Bild einen eigenen keyframe zu schreiben. Vielleicht hilft das.

        Ein Hinweis zu den Keyframes: Beim ersten Durchgang werden die Bilder ausgeblendet und bleiben auch für den zweiten Durchgang ausgeblendet. Sichtbar werden sie jeweils erst wieder beim Start der verzögerten Animation. Beim zweiten Durchgang ist beim Ausblenden von Bild 1 das darunter liegende Bild 2 gar nicht sichtbar.

        Per Keyframe können die Bilder am Ende der Animation wieder sichtbar gemacht werden, trotzdem funktioniert die Animation aber nicht wie beim ersten Durchgang, weil die Bilder animiert und verzögert eingeblendet werden. Möglicherweise gibt es andere Lösungen wie Z-Index oder Bildposition animieren. Vielleicht findest du eine Lösung.

        Mit besten Grüssen Richard

        1. Servus!

          Danke, dass hilft mir schon weiter, ich werd's in den nächsten Tagen ausprobieren.

          Matthias Scharwies