Du hast deinen AdBlocker an?

Es wäre ein Traum, wenn du ihn für t3n.de deaktivierst. Wir zeigen dir gerne, wie das geht. Und natürlich erklären wir dir auch, warum uns das so wichtig ist. Digitales High-five, deine t3n-Redaktion

Entwicklung & Design

Magic kurz vorgestellt: Animate.css für Anwendungsentwickler

Magic: Das Animate.css für Web-Apps. (Screenshot: Magic)

Wir haben bereits über die CSS-Bibliothek animate.css berichtet. Wer noch mehr und vor allem andere Animations-Effekte benötigt, der sollte sich die Beta von Magic ansehen.

Animationen ohne JavaScript bieten einige Vorteile: Native CSS-Animationen werden schneller gerendert oder es kann auf etwaige Zusatzbibliotheken wie jQuery verzichtet werden. Magic bringt native CSS3-Animationen die mehr können, als nur Text einzublenden.

magic-css
Magic: Das Animate.css für Web-Apps. (Screenshot: Magic)

Ich habe euch bereits animate.css vorgestellt – eine CSS-Library die euch „Out-of-the-Box“-Animationen liefert, ganz ohne JavaScript. Magic geht einen Schritt weiter und liefert euch noch zusätzliche Effekte wie vanishOut – ein netter Effekt um DOM-Elemente verschwinden zu lassen, aber weitaus schöner als sonst üblich.

Magic vs Animate.css

Während ich animate.css eher für kleinere Text-Animationen beziehungsweise für subtile Effekte einsetzen würde, liefert mir Magic die  Animationen, die ich eher in Web-Apps benötigen könnte.

Um das volle Potential von Magic auszuschöpfen empfiehlt sich aber der Einsatz von JavaScript, denn viele Animationen sind nur im Rahmen von Benutzer-Interaktion sinnvoll. Allerdings könnt ihr genau wie bei animate.css  die Effekte natürlich auch ohne JavaScript einsetzen – wenn ihr dafür einen Use-Case habt. Ihr seid dann aber natürlich auf das :hover-Event von CSS beschränkt.

Magic einsetzen

Nachdem ihr das Stylesheet von Magic eingebunden habt, könnt ihr einen Effekt nach einem :hover-Event auslösen. In diesem Beispiel wurde jQuery eingesetzt.

$('.element').hover(function () {
  $(this).addClass('magictime vanishIn');
});

Die eingebundene .magictime-Klasse definiert die Dauer der Animation – diese könnt in in der Magic-CSS-Datei anpassen.

Die Beta von Magic.css verfügt über keine CSS3-Hardware-Beschleunigung. Die Hardware-Beschleunigung könnt ihr – derzeit noch – mit 3D-Transformationen auslösen, also:

transform: rotate3d( 0, 0, 0, 45deg );

anstelle von

transform: rotate( 45deg );

Fazit zu Magic

Magic bietet durchaus einen Mehrwert zu animate.css. Allerdings ist es mit 79 Kilobyte im minifizierten Zustand kein Leichtgewicht – gerade wenn ihr nur einige Animationen einsetzen wollt und nicht alle 57.

Die Beta von Magic bietet noch keinen „Customizer“ an, daher würde ich – wie auch bei animate.css – die benötigten Animations-Klassen direkt in meine eigene CSS-Datei einbinden, anstatt beide Bibliotheken separat.

Meiner Meinung nach eignen sich die Magic-Animationsarten nicht unbedingt für die Animation von Text – diesen Job erledigt aber auch schon animate.css, und das hervorragend. Ich würde also eine Kombination von beiden Bibliotheken einsetzen, denn Magic löst einfach andere Anwendungsfälle als animate.css.

Wer also mehr als nur Text animieren möchte – und das mithilfe von nativem CSS3 – dem kann ich Magic empfehlen. Ihr könnt euch Magic samt Dokumentation bei GitHub herunterladen. Die ausführlichen Demos könnt ihr übrigens hier sehen.

Bitte beachte unsere Community-Richtlinien

3 Reaktionen
Marc

Ist schon erstaunlich , was mit CSS3 so alles möglich ist. Die Beispielseite von Magic ist aber eher nicht gelungen ;-)

Lisa + Giorgio

Gar nicht mal so übel. Wobei für meine Zwecke animate.css völlig ausreicht. Und ich animiere nicht nur Text mit animate.css.

Justin (nicht Biber)

Super Artikel und eine Tolle Überschrift. Weiter so!

Du musst angemeldet sein, um einen Kommentar schreiben zu können.

Jetzt anmelden

Finde einen Job, den du liebst