It is almost a year ago, that Christian Pucci from Italy introduced his stylesheet-project Magic.css. Magic.css lets you build CSS3 animations with special effects. Last year, Christian, better known as miniMac, had only a handful of effects to show. Up until today, this number has grown to 55. All the effects come in a single stylesheet, prefixed for all modern browsers. Magic.css is published under the terms of the MIT license, and can be used freely.
Magic.css: Lots of Motion on Your Website
CSS3 animations are coming, but not really there yet. Only a few days ago, we introduced you to a comprehensive beginners’ pocket guide to CSS3 animations. Consider reading it, if you want to get up and running. Christian Pucci’s ever-growing Magic.css further lowers the threshold for starting, so why not get that stuff flying, floating and rotating?
A separate demo lets you see all possible effects, although the visualization is not very impressive. A small image of a diamond in front of a red background gets moved in or out of a lined frame in the different ways Magic.css allows. This could have been done with a lot more tension. But anyway, you understand what it does, at the lowest common factor…
Magic.css: More Effects in the Works
These days Christian is actively working on the repository. I expect new effects to show up soon. Inside the stylesheet you find all the definitions properly prefixed for all modern browsers. While the demo only works properly in Chrome and Safari, the effects will work everywhere.
Christian is working on bringing forward the minified version, which will massively cut down the size of the otherwise almost 100 kb large file. The minified version is already there, but still empty.
Magic.css facilitates the use of CSS3 Animations and deserves a place in any designer’s bookmark collection.
- Magic.css | Demo
- Magic.css | Github Repository
- The CSS Animations Pocket Guide: Now More Free Than Ever | Noupe Magazine