Richard Rüfenacht: CSS-Animation transform:scale()

Beitrag lesen

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