Ioanni Mitsakis 21. Mai 2014

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

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.
Dr. Webs exklusiver Newsletter
Hinweise zur Protokollierung der Anmeldung, dem Einsatz von MailChimp als Versanddienstleister und zu den Widerrufsrechten findest Du in unseren Datenschutzhinweisen.

3 Kommentare

  1. 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 …

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