Simplificación de la animación CSS3 @keyframes

Question

Hace unos meses construí un AT3 AT-AT animado http://www.ruawebdesign.com/css3-at-at. Lo construí principalmente como un experimento de aprendizaje y para ver qué era posible usando las nuevas características de CSS3. Como la mayoría de las cosas que construimos, lo lancé a la red. No esperaba las grandes cantidades de tráfico al sitio que recibió. Pensé que tal vez algunos puntos de vista de amigos y compañeros de trabajo, pero todavía acumula unos cientos de visitas por semana en todo el mundo.

Como resultado, me gustaría hacerlo un poco más racional en relación con el uso de la CPU. Por alguna razón, las animaciones estrangulan la memoria. Agradecería cualquier comentario de ustedes, gente encantadora en stackoverflow, que les permitiría a las personas ver mi experimento sin sus fanáticos.

También antes de que alguien sugiera una alternativa javascript/jquery recuerde que construí esto para probar las capacidades de CSS3.

Gracias de antemano.

Answer 1

Buen trabajo. Me has abierto los ojos al potencial de CSS3 para la animación.

No puedo responder a la pregunta que hizo por desgracia, pero estoy entrenando para ser un animador para que pueda hacer algunas sugerencias para ayudarle a mejorar su animación:

1. elevador de dos piernas a la vez: Delantero izquierdo y posterior derecho al mismo tiempo, luego Frente derecho y atrás izquierdo al mismo tiempo. Deben ser piernas opuestas para mantener el equilibrio.

2. Las patas que no se levantan deben permanecer plantadas en el suelo, pero se mueven hacia atrás en la escena para simular el hecho de que el cuerpo se mueve hacia adelante en relación con su posición.

3. Dado que las patas en el suelo se deslizan hacia atrás, el cuerpo disminuirá ligeramente de forma natural.

4. Si desea agregar aún más realismo, haga que el cuerpo baje un poco más inmediatamente después de que las piernas levantadas lleguen al suelo nuevamente, luego vuelva a subir. Esto hará que parezca que el peso está cambiando a esas piernas.