# Armature in CSS Animation **URL:** \ **Category:** programming\ **Created:** [January 16, 2020, 5:35pm UTC](https://forum.kirupa.com/t/armature-in-css-animation/641600 "2020-01-16T17:35:12Z")\ **Posts on this page:** 9\ **Page:** 1
**Author:** ![kvapster](https://yyz1.discourse-cdn.com/flex011/user_avatar/forum.kirupa.com/kvapster/32/9132_2.png) [@kvapster](https://forum.kirupa.com/u/kvapster)\ **Post date:** [January 16, 2020, 5:35pm UTC](https://forum.kirupa.com/t/armature-in-css-animation/641600/1 "2020-01-16T17:35:12Z")
I wanted to create armature with CSS animation similar to 3D Blender and Flash and came up with this in the process. [http://kvapster.com/armature.html](http://kvapster.com/armature.html) 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? ---
**Author:** ![kirupa](https://yyz1.discourse-cdn.com/flex011/user_avatar/forum.kirupa.com/kirupa/32/11616_2.png) [@kirupa](https://forum.kirupa.com/u/kirupa)\ **Post date:** [January 16, 2020, 9:28pm UTC](https://forum.kirupa.com/t/armature-in-css-animation/641600/2 "2020-01-16T21:28:12Z")
No, CSS doesn’t have anything like that…yet! What you’ve created looks really nice btw 🎁 ---
**Author:** ![kvapster](https://yyz1.discourse-cdn.com/flex011/user_avatar/forum.kirupa.com/kvapster/32/9132_2.png) [@kvapster](https://forum.kirupa.com/u/kvapster)\ **Post date:** [January 19, 2020, 7:50pm UTC](https://forum.kirupa.com/t/armature-in-css-animation/641600/3 "2020-01-19T19:50:06Z")
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. [http://kvapster.com/armature-guy2.html](http://kvapster.com/armature-guy2.html) The next step is making controlled movements like running. ---
**Author:** ![kirupa](https://yyz1.discourse-cdn.com/flex011/user_avatar/forum.kirupa.com/kirupa/32/11616_2.png) [@kirupa](https://forum.kirupa.com/u/kirupa)\ **Post date:** [January 19, 2020, 8:06pm UTC](https://forum.kirupa.com/t/armature-in-css-animation/641600/4 "2020-01-19T20:06:37Z")
[![](https://media.giphy.com/media/26ufdipQqU2lhNA4g/giphy.gif) ](https://media.giphy.com/media/26ufdipQqU2lhNA4g/giphy.gif) ---
**Author:** ![Arijit\_Chowdhury](https://yyz1.discourse-cdn.com/flex011/user_avatar/forum.kirupa.com/arijit_chowdhury/32/10369_2.png) [@Arijit\_Chowdhury](https://forum.kirupa.com/u/Arijit_Chowdhury)\ **Post date:** [January 20, 2020, 1:57am UTC](https://forum.kirupa.com/t/armature-in-css-animation/641600/5 "2020-01-20T01:57:30Z")
Nice… Is it keyframe animation ? ---
**Author:** ![kvapster](https://yyz1.discourse-cdn.com/flex011/user_avatar/forum.kirupa.com/kvapster/32/9132_2.png) [@kvapster](https://forum.kirupa.com/u/kvapster)\ **Post date:** [January 20, 2020, 2:46am UTC](https://forum.kirupa.com/t/armature-in-css-animation/641600/6 "2020-01-20T02:46:18Z")
Hi! CSS keyframes, yes. ---
**Author:** ![prg9](https://avatars.discourse-cdn.com/v4/letter/p/8dc957/32.png) [@prg9](https://forum.kirupa.com/u/prg9)\ **Post date:** [January 20, 2020, 4:13am UTC](https://forum.kirupa.com/t/armature-in-css-animation/641600/7 "2020-01-20T04:13:47Z")
> [@kvapster](#): > > The next step is making controlled movements 🤔 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. ---
**Author:** ![kvapster](https://yyz1.discourse-cdn.com/flex011/user_avatar/forum.kirupa.com/kvapster/32/9132_2.png) [@kvapster](https://forum.kirupa.com/u/kvapster)\ **Post date:** [January 20, 2020, 10:56am UTC](https://forum.kirupa.com/t/armature-in-css-animation/641600/8 "2020-01-20T10:56:02Z")
Absolutely! Such as making the all the joints rotate naturally by dragging the hands or feet via mouse. ---
**Author:** ![kvapster](https://yyz1.discourse-cdn.com/flex011/user_avatar/forum.kirupa.com/kvapster/32/9132_2.png) [@kvapster](https://forum.kirupa.com/u/kvapster)\ **Post date:** [January 26, 2020, 5:42pm UTC](https://forum.kirupa.com/t/armature-in-css-animation/641600/9 "2020-01-26T17:42:30Z")
Finally got some time in to try making a runner! I don’t get much time during the week.☹ But it definitely works well. [http://kvapster.com/armature-guyrun.html](http://kvapster.com/armature-guyrun.html)