Streamlining CSS3 Animation @keyframes

Question

A few months back I built an animated CSS3 AT-AT http://www.ruawebdesign.com/css3-at-at. I built it mainly as a learning experiment and to see what was possible using the new CSS3 features. Like most things we build I released it onto the net. I wasn't expecting the large amounts of traffic to the site it received. I thought maybe a few views from friends and work colleagues but it still racks up a few hundred views a week from around the world.

As a result I would like to make it a bit more streamlined in relation to it's CPU usage. For some reason the animations throttle the memory. I would appreciate any feedback from you lovely people on stackoverflow that would allow people to view my experiment without their fans kicking in.

Also before anyone suggests a javascript/jquery alternative remember I built this to test the capabilities of CSS3.

Thanks in advance.

Answer 1

Nice work. You've opened my eyes to the potential of CSS3 for animation.

I can't answer the question you asked unfortunately, but I am training to be an animator so I can make some suggestions to help you improve your animation:

1. Lift two legs at a time: Front left and back right at the same time, then Front right and back left at the same time. They must be opposing legs for balance.

2. The legs that are not lifted should stay planted on the ground, but move backwards in the scene to simulate the fact that the body is moving forward relative to their position.

3. Since the legs on the ground are sliding backward, the body will naturally go lower slightly.

4. If you want to add even more realism make the body go down slightly further immediately after the lifted legs reach the ground again then come back up. This will make it look like the weight is shifting on to those legs.