Tool zum Erstellen und Konfigurieren von Animationen

WAIT! ANIMATE – CSS-Animationen leicht gemacht
Keine Kommentare

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

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/#/

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
webinale – the holistic web conference

Diversity matters – Onlinemarketing 2020

mit Astrid Kramer (Astrid Kramer Consulting)

Das Recht auf Privatsphäre – eine Chance für UX

mit Lutz Schmitt (Lutz Schmitt Design & Consulting)

The Revenge of Structured Data

mit Stephan Cifka (Performics Germany GmbH)

IT Security Summit 2020

Zero Trust – why are we having this conversation?

mit Victoria Almazova (Microsoft)

Digitaler Ersthelfer

mit Martin Wundram (DigiTrace GmbH)

Aufmacherbild: Stop Waiting red sign with sun background von Shutterstock / Urheberrecht: Gustavo Frazao

Unsere Redaktion empfiehlt:

Relevante Beiträge

Abonnieren
Benachrichtige mich bei
guest
0 Comments
Inline Feedbacks
View all comments
X
- Gib Deinen Standort ein -
- or -