Animista – Vorgefertigte CSS Animationen

Die Zeiten von Adobe Flash und komplett animierten Webseiten, die mit einer gefühlt endlosen Ladezeit die Geduld ihrer Besucher strapaziert haben, sind glücklicherweise lange vorbei. Auch heute werden Seiten natürlich noch animiert – allerdings meistens zurückhaltender als noch in den Anfangszeiten des Internets und anstatt auf Adobe Flash setzt man heute z. B. auf CSS3. Damit lassen sich schlichte, aber auch aufwendige Animationen recht einfach umsetzen. Noch einfacher ist es natürlich, wenn man dabei auf vorgefertigte CSS Animationen zurückgreifen kann, die man nur noch in sein eigenes Webprojekt einbinden muss.

Animista ist eine solche Sammlung mit vorgefertigten CSS Animationen. Über die Navigation ist die Sammlung unterteilt in verschiedene Bereiche, z. B. „Entrances“ (Eingangsanimationen), „Exits“ (Ausgangsanimationen) oder „Background“ (Hintergrundanimationen). Jede Animation ist in verschiedenen Varianten vorkonfiguriert verfügbar, kann aber auch beliebig angepasst werden. Über eine Einstellungsbox am linken Rand lässt sich u. a. die Verzögerung, die Wiederholung, die Richtung oder auch die Dauer der gewählten Animation verändern. Über den Replay-Button rechts oben lässt sich die Animation beliebig wiederholen, um die Auswirkung der Einstellungen zu testen.
Wenn eine passende Animation gefunden wurde, kann diese entweder zu einer Favoritenliste hinzugefügt werden oder man lässt sich direkt den CSS Code generieren, der dann nur noch kopiert und im eigenen Webprojekt eingefügt werden muss.

Entstanden ist Animista als kleines Nebenprojekt von Ana Travas aus Kroatien. Ursprünglich wollte sie ihre verwendeten CSS Animationen einfach nur sinnvoll und zugänglich organisieren, damit sie diese auch in anderen Projekten wiederverwenden kann. Mit der Zeit hat sich aus der Sammlung eine Art Spielplatz entwickelt, auf dem die Auswirkung verschiedener Optionen, wie z. B. die Beschleunigung, eine Verzögerung oder die Dauer auf die Animation getestet werden konnte.

Wer also auf der Suche nach passenden Animationen für seine Website ist oder wer einfach mal ausprobieren möchte, was man mit CSS alles animieren kann, sollte mal bei Animista vorbeischauen. Der Download der vorgefertigten und generierten CSS Animationen ist kostenlos für private und kommerzielle Projekte und steht unter der FreeBSD-Lizenz.

Hier geht’s weiter zu Animista.