201310Jul

Effeckt.css: Sammlung mit raffinierten CSS3-Transitions

Für eine überzeugende User Experience kommt es bei mobilen Apps auf die Performance an: Dass diese nicht immer leicht zu erreichen ist, erklärt beispielsweise dieser ausführliche Artikel. Im visuellen Bereich von mobilen Web-Applikationen lässt sich immerhin mit CSS3-Animationen eine ordentliche DOM-Performance erzielen, vorausgesetzt, die Effekte werden richtig eingesetzt.
Eine Sammlung mit den pfiffigsten CSS3-Effekten für diesen Zweck stellt Effeckt.css dar. Auf der Seite finden sich die "Work In Progress"-Beispiele der beliebtesten Effekte, die unter Anderem von Hakim El Hattab oder Chris Coyier (CSS-Tricks) entwickelt wurden.

Effeckt.css - UI-Less and Performant Transitions/Animations

Angefangen hat das Ganze mit diesem Request bei GitHub. Dort wurden die entsprechenden CSS3-Snippets zusammengetragen, die eine Framerate von 60 FPS auf mobilen Geräten gewährleisten sollen. Bei Effeckt.css handelt es sich also um keine User Interface-Bibliothek, sondern lediglich um CSS-Hooks, die aus Transitions oder Keyframe-Animationen bestehen. Die GitHub-Seite gibt Aufschluss über den Quelltext der Snippets.