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

Wir freuen uns über kontroverse Diskussionen, die gerne auch mal hitzig geführt werden dürfen. Beleidigende, grob anstößige, rassistische und strafrechtlich relevante Äußerungen und Beiträge tolerieren wir nicht. Bitte achte darauf, dass du keine Texte veröffentlichst, für die du keine ausdrückliche Erlaubnis des Urhebers hast. Ebenfalls nicht erlaubt ist der Missbrauch der Webangebote unter t3n.de als Werbeplattform. Die Nennung von Produktnamen, Herstellern, Dienstleistern und Websites ist nur dann zulässig, wenn damit nicht vorrangig der Zweck der Werbung verfolgt wird. Wir behalten uns vor, Beiträge, die diese Regeln verletzen, zu löschen und Accounts zeitweilig oder auf Dauer zu sperren.

Trotz all dieser notwendigen Regeln: Diskutiere kontrovers, sage anderen deine Meinung, trage mit weiterführenden Informationen zum Wissensaustausch bei, aber bleibe dabei fair und respektiere die Meinung anderer. Wir wünschen Dir viel Spaß mit den Webangeboten von t3n und freuen uns auf spannende Beiträge.

Dein t3n-Team

3 Kommentare
Justin (nicht Biber)

Super Artikel und eine Tolle Überschrift. Weiter so!

Antworten
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.

Antworten
Marc

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

Antworten

Melde dich mit deinem t3n Account an oder fülle die unteren Felder aus.