Deklarative CSS-Animationen

AniJS
Kommentare

Man stelle sich folgende Situation vor: Bei einem Klick auf Element X soll ein Element Y Aktion Z ausführen. So weit, so gut. So etwas wird man entweder in JavaScript realisieren oder wahrscheinlich etwas

Man stelle sich folgende Situation vor: Bei einem Klick auf Element X soll ein Element Y Aktion Z ausführen. So weit, so gut. So etwas wird man entweder in JavaScript realisieren oder wahrscheinlich etwas umständlicher in der CSS-Datei des Projekts. Mit AniJS jedoch eröffnet sich eine dritte Möglichkeit, die auf den ersten Blick überaus spannend erscheint. Die Parole lautet: Deklarative Animationen.

if: focus, do: flipInY, to: p

Was auf den zweiten Blick etwas kurios anmutet, geht schnell in Fleisch und Blut über. Denn wenn man AniJS eingebunden hat, hat man die Möglichkeit, die Konditionen für die gewünschten Animationen im data-anijs-Attribut jedes beliebigen Elements zu formulieren. Das ganze könnte dann so aussehen:

eins zwei

Klickte man nun auf den Absatz, würden die Links nach hinten wegkippen.

Eine Dokumentation zur Definition der Sätze liefert einen guten Überblick über die Möglichkeiten, die AniJS bietet, das Projekt selbst findet man auf GitHub, und die Demo bietet die Möglichkeit, auf der Demoseite mit den Elementen zu spielen. So viel Spaß beim Testen hatten wir jedenfalls schon lange nicht mehr.

Obwohl man übrigens auch eigene Animationen mit AniJS erstellen kann, empfiehlt Dariel Noel Bila Plagado, der Schöpfer von AniJS den Einsatz von Animate.css – dann hat man sich diese Arbeit auch noch gespart.

Aufmacherbild: 3d illustration of movie camera icon button on keyboard with soft focus von Shutterstock / Urheberrecht: dencg

Unsere Redaktion empfiehlt:

Relevante Beiträge

Meinungen zu diesem Beitrag

X
- Gib Deinen Standort ein -
- or -