CSSmu javascript library

CSSmu.js allows to create and control timelines in order to animate HTML elements. The goal here is to provide a new way of dealing with it, exploring what remains impossible or tricky to achieve using classical CSS3 animation properties. This small library focuses on building more complex, interactive sequences, still based on CSS declarations.

The current CSSmu.js release is the very first one, and remains experimental on many aspects. I will be upgrading it, and already have a list of future enhancements to make. I would be very glad to hear feedback from people trying it as well ! So please don't hesitate to tell me if you managed to build something awesome out of it, or if you thought about a way of improving it.

You design a timeline's action directly in your CSS stylesheets, by defining classes to add to desired elements.
These classes specify timeline names and frame data, read by CSSmu in order to create javascript objects that can then be manipulated extensively and easily.

In the end, what happens to your HTML elements is really just some enhanced class juggling, giving them the right aspect at the right time.
Just think of the result as that setTimeout / setInterval / addClass / removeClass sequence you've never been insane enough to dare code.

And that's it. We've got a simple 8-keyframes animation,displaying two of them per second.

Of course, at this point, similar results can be obtained with a classic CSS3 animation + @keyframes approach.
But using CSSmu.js starts making sense when it comes to tweaking and controlling timelines.

For example, based on the same CSS frame declarations, if we add a opacity:0.5 property to .disc
and apply this class to eight elements with ids "disc0" to "disc7", we can do things like this :

And obtain this.(Hover the animation to see how the elements' class attributes shift.)

If you let the above animation run for a certain amount of time and watch it closely, you might notice the clockwise and anti-clockwise motions eventually get out of sync.
The way CSSmu (and actually javascript itself) works does not allow 100% accurate time intervals, and we lose a few milliseconds at every frame.

I'm already thinking about a way to fix that in next version with some kind of interval stabilization or a global clock system keeping all timelines "tuned" together.

So, do you think this approach is worth a try ? If it's the case :

• Thank you !
• Here's a detailed tutorial to build something a little more complex.