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.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.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
- Magic.css | Demoseite
- Magic.css | Github Repository
- The CSS Animations Pocket Guide: Kostenloser denn je | Dr. Web Magazin
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 :-)
Danke für die Anmerkung. Genau so war das natürlich gemeint. Ist aber durch den Kommentar noch klarer geworden.