knuspermagier.de

Since 2005.

CSS-Animation mit Verzögerung zwischendurch

Für den letzten Post wollte ich, dass sich meine schöne Zeitmaschinen-Animation unendlich oft wiederholt, aber natürlich sollte es einen Abstand zwischen den Iterationen geben. animation-delay funktioniert da leider nicht. Also eigentlich wollte ich es, damit man die Animation auch sieht. Die Alternative wäre gewesen, mit JavaScript zu schauen, ob das Bild sichtbar ist und die Animation erst dann abzuspielen, aber mein Blog hat nur ein “Custom Styles”-Feld pro Post und kein “Custom JavaScript” und deswegen entschied ich mich für die infinite Animation.

Jedenfalls gibt es kein animation-delay-between-iterations, es gibt aber einen Trick, der passenderweise auf css-tricks.com steht. Man baut die Keyframes einfach so um, dass die meiste Zeit nichts passiert! Der Post erklärt es ganz gut, es hat ein Bisschen mit ✨Mathematik✨ zu tun.

Danke für diesen Trick!

Kommentare, Feedback und andere Anmerkungen? Schreib mir eine E-Mail 🤓