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
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.
| Name | WAIT! ANIMATE |
|---|---|
| Hersteller | EggBox |
| Projektwebsite | http://waitanimate.eggbox.io/ |
| GitHub | https://github.com/eggboxio/waitanimate |
Aufmacherbild: Stop Waiting red sign with sun background von Shutterstock / Urheberrecht: Gustavo Frazao
Meinungen zu diesem Beitrag