CSS3 animation streamlining @keyframes

Question

A few months ago I built an animated CSS3 AT-AT http://www.ruawebdesign.com/css3-at-at . I built it mainly as a training experiment and looked at what was possible with the new CSS3 features. Like most of the things we created, I released it online. I did not expect large volumes of traffic to the site that he received. I thought maybe a few looks from friends and work colleagues, but it still holds several hundred views a week from around the world.

As a result, I would like to make it a little more streamlined in relation to its CPU usage. For some reason, the animation throttles memory. I would appreciate any feedback from you, great people, on stackoverflow that would allow people to view my experiment without their fans kicking.

Also, before anyone offers an alternative to javascript / jquery, I created this to test CSS3's capabilities.

Thanks in advance.

Answer 1

Good job. You have opened your eyes to the potential of CSS3 for animation.

I can’t answer the question you asked, but I am training to be an animator, so I can do some tips to help you improve the animation:

• Lift two legs at a time: first left and right right, then right and left at the same time. They must resist the legs for balance.

• Legs that do not rise should remain on the ground, but move in the opposite direction to simulate that the body moves forward relative to their position.

• As the feet on the ground slide back, the body naturally lowers a little lower.

• If you want to add even more realism, make the body a little lower, immediately after the raised legs reach the ground again, and then go back up. This will make it look like the weight is moving on these legs.