WAIT! ANIMATE

Tool zum Erstellen und Konfigurieren von Animationen

WAIT! ANIMATE – CSS-Animationen leicht gemacht

CSS bietet von Haus aus kaum eine (einfache) Möglichkeit, um Animationen zu stoppen, bevor sie wieder von vorne beginnen. Es gibt zwar die Methode animation-delay, sie führt aber lediglich zu einer Verzögerung beim Start der Animation. Das Tool WAIT! ANIMATE ermöglicht hingegen die Konfiguration von Animationsbewegungen und -zeiten ganz ohne JavaScript.

Wie man mit ein bisschen CSS, wenig Vorwissen und komplett ohne JavaScript Animationen erstellt und konfiguriert, zeigt das Tool WAIT! ANIMATE. Zwar gibt es bereits einige CSS-Funktionen, mit denen die Konfiguration von Animationen möglich ist. Allerdings benötigt man dafür spezielles Know-how und etwas (mehr) Zeit.

WAIT! ANIMATE ermöglicht die Berechnung der Keyframes von Animationen, erlaubt das Einfügen von Verzögerungen zwischen Animationen und sogar das Erstellen von eigenen Animationen.

Beispielanimationen mit WAIT! ANIMATE, Quelle: http://waitanimate.eggbox.io/#/

Das Tool stellt Nutzern Beispielanimationen zur Verfügung, bei denen die Wartezeit manuell beliebig eingestellt werden kann. Dabei können Nutzer zwischen derzeit 14 verschiedenen Animationen wählen. Der zugehörige Code kann einfach in die Zwischenablage kopiert werden.

Wem das nicht ausreicht, kann sich per Konfigurator eigene Animationen erstellen lassen. Konfigurierbare Parameter sind beispielsweise die Animationsdauer, die Wartezeit zwischen den Animationen oder die Bewegung der Animation auf der X- und Y-Achse. Auch hier kann man sich den Code einfach kopieren.