Armature in CSS Animation

I wanted to create armature with CSS animation similar to 3D Blender and Flash and came up with this in the process.

It seems pretty straight forward, and with JS it can be made to only to have to animate the last attached object. Before going any further though, is there already something out there for CSS armature animation?


No, CSS doesn’t have anything like that…yet! What you’ve created looks really nice btw :gift:

1 Like

Thank you! I did some more practicing on the process of adding branches of armature,learning the nuances of placement, and using in-line CSS. I even started practicing hexa colors, which I had wanting to do for some time.
The next step is making controlled movements like running.



Nice… Is it keyframe animation ?

Hi! CSS keyframes, yes.


You may consider looking into using CSS Variables to control your Keyframes, Transforms, and other relative properties dynamically. Either via a few strategic CSS hovers or with simple Javascript. With Javascript you can get and set the CSS Variables and hook them to the mouse etc., you could then create simple logic. By doing so you could make things more interactive based upon actual user input while still keeping it relative to CSS mostly.

Absolutely! Such as making the all the joints rotate naturally by dragging the hands or feet via mouse.

Finally got some time in to try making a runner! I don’t get much time during the week.:frowning:
But it definitely works well.

1 Like