Kategorien
Design HTML/CSS JavaScript & jQuery Programmierung

Magic.css: CSS3 Animations mit Spezialeffekten

Seit Juli letzten Jahres arbeitet Christian Pucci aka miniMac an seinem Stylesheet mit Spezialeffekten auf Basis von CSS3 Animations. Konnte er zum Start lediglich eine Handvoll vorweisen, bringt es seine Sammlung mittlerweile auf stattliche 55 Effekte, die komplett geprefixed in allen modernen Browsern funktionieren. Das Projekt steht unter MIT-Lizenz, kann also frei verwendet werden.

magic-demo-site

Magic.css: Viel Bewegung auf der Website

CSS3 Animations sind im Kommen, aber noch nicht so weit verbreitet, wie man glauben könnte. Vor einigen Tagen erst stellten wir hier bei Dr. Web einen leicht verständlichen Pocket-Guide für Einsteiger in CSS3 Animations vor. Christian Pucci aus Italien, auf Github und auch sonst im Web unter dem Pseudonym miniMac unterwegs, erleichtert den Einsatz mit seinem stetig wachsenden Stylesheet Magic.css ganz ordentlich.

Von einem halben Dutzend Effekte im Juli 2013 steigerte er den Umfang auf 55 Effekte im Mai 2014. Neben den eigentlichen Effekten lässt sich noch die Zeitdauer der Ausführung, respektive bis zur Ausführung steuern. Die eigentlichen Effekte setzt man dann am einfachsten per JavaScript, also etwa mit jQuery um.

Auf der Demoseite zum Projekt können Sie alle verfügbaren Effekte ausprobieren, wenn auch die Umsetzung der Demo nur wenig beeindruckt. Ein roter Diamant wird auf die unterschiedlichen Weisen in das umgebende Quadrat hinein- oder hinausbewegt. Da hätte man sich etwas spannenderes vorstellen können. Sei’s drum, das Prinzip wird jedenfalls klar.

magic-einzeldemo
Magic.css Demo: Rechts den Effekt klicken, links den Diamanten in Bewegung sehen

Magic.css: weitere Effekte in Arbeit

Christian schraubt aktuell intensiv an dem Repository. Man wird wohl in Kürze mit weiteren Effekten rechnen dürfen. Das Stylesheet enthält alle Definitionen mit den erforderlichen Prefixes für alle modernen Browser, während die Demoseite selber zuverlässig nur im Chrome und Safari funktioniert.

Derzeit arbeitet Christian an der minifizierten Version, um die knapp 100 kb des Stylesheets nach unten zu drücken. Die minifizierte Datei liegt zwar schon im Repository, ist aber noch leer.

Magic.css vereinfacht die Anwendung von CSS3 Animations deutlich und gehört auf jeden Fall in Ihre Bookmark-Sammlung.

Links zum Beitrag

Von Ioanni Mitsakis

Ioanni Mitsakis ist Frontend-Entwickler bei einem großen europäischen Automobilzulieferer und dort verantwortlich für die Gestaltung der UIs der diversen internen Online-Tools, ohne deren Hilfe die Zusammenarbeit über Landesgrenzen hinweg aus heutiger Sicht undenkbar erscheint.

3 Antworten auf „Magic.css: CSS3 Animations mit Spezialeffekten“

Schade, die Demoseite funktioniert nicht. Beim scrollen bleibt das Demo-Element nicht stehen, sondern scrollt mit nach oben raus.
So kann man sich die Effekte ab „Static Effects Out“ nicht mehr ansehen …

danke für den Tipp!

Eine kleine Anmerkung zum Artikel:
Die Formulierung „Die eigentlichen Effekte setzt man dann am einfachsten per JavaScript, also etwa mit jQuery um.“ ist ein bisschen missverständlich, da die Animationen ja über CSS realisiert werden. jQuery oder JavaScript pur wird man nur dafür einsetzen, die Animation an eine Interaktion als Auslöser zu knüpfen.

Und noch eine Anmerkung zu magic.css selbst:
Bei Magic.css geht man sehr großzügig mit den Browserpräfixen um: -ms- braucht man nicht, da der IE in Version 10 gleich die Animationen ohne Präfix implementiert hat. Und ob man -o- nur für Opera Version 12.0 (der 12.1 kann es ohne und in anderen Versionen geht es mit -webkit-) braucht, oder auch -moz-, das nur für den Firefox vor Version 16 benötigt wird, sei dahin gestellt. Im Zweifelsfall genügt die Standardeigenschaft ohne Präfix und die Eigenschaften mit -webkit-. Das macht das Stylesheet gleich um einiges kürzer :-)

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert.