Magic.css: CSS3 Animations on Steroids

May 21st, 2014

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?

From half a dozen effects in 2013, the project has grown to 55 effects today. Besides adding effects, you can also control their time-related parameters. The effects are best controlled using any JavaScript solution, e.g. jQuery.

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: The visualization of the demo is not very impressive

Magic.css: The visualization of the demo is not very impressive

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.

Related Links

Ioanni Mitsakis is front-end developer at a major European automotive supplier and responsible for the look & feel of their internal cloud-based apps. As his employer works internationally with distributed teams world-wide, a rock-solid development foundation is what Ioanni aims for. He better should ;-)

Tags: , , , ,

5 comments for „Magic.css: CSS3 Animations on Steroids
  1. Arun Mahendrakar on May 22nd, 2014 at 3:04 am

    In the demo site, it would be great if the ‘diamond’ scrolls down along with the page. I just cannot see the effects of the button at the bottom of the page.

    • Dieter Petereit on May 22nd, 2014 at 9:59 am

      Your monitor is too small ;-)

  2. Dan Excel on May 22nd, 2014 at 3:46 am

    Nice, I worked on something like that several years ago.

  3. Tinku TR on May 22nd, 2014 at 1:41 pm

    Hi this one is great. But what kind of license is applied? Can i use it for commercial projects or templates i sell??

    • Dieter Petereit on May 22nd, 2014 at 7:43 pm

      Had you even read to the end of the very first paragraph, you’d know that the MIT license applies…