css - 简化 CSS3 动画 @keyframes

Question

几个月前，我构建了一个动画 CSS3 AT-AT http://www.ruawebdesign.com/css3-at-at。我构建它主要是作为一个学习实验，并看看使用新的 CSS3 功能可以实现什么。像我们构建的大多数东西一样，我将它发布到网上。我没想到它收到的网站会有大量流量。我想可能是朋友和同事的一些观点，但它每周仍然有来自世界各地的几百个观点。

因此，我想让它在 CPU 使用率方面更加精简。由于某种原因，动画会限制内存。我会很感激你们可爱的人对 stackoverflow 的任何反馈，这些反馈可以让人们在没有粉丝参与的情况下查看我的实验。

同样在有人建议使用 javascript/jquery 替代方案之前，请记住我构建它是为了测试 CSS3 的功能。

提前致谢。

Answer 1

不错的作品。你让我看到了 CSS3 在动画方面的潜力。

很遗憾，我无法回答您提出的问题，但我正在接受动画师培训，因此我可以提出一些建议来帮助您改进动画：

1. 两条腿同时抬起：左前和右后同时抬起，然后右前和左后同时抬起。他们必须是相反的腿才能保持平衡。

2. 未抬起的腿应保持在地面上，但在场景中向后移动以模拟身体相对于其位置向前移动的事实。

3. 由于地面上的腿向后滑动，身体自然会稍微降低。

4. 如果您想增加更多的真实感，请在抬起的腿再次到达地面后立即使身体稍微下降，然后再站起来。这将使它看起来像重心转移到那些腿上。