css - 简化 CSS3 动画@keyframes

Question

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

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

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

提前致谢。

Answer 1

干得漂亮。您让我看到了 CSS3 在动画方面的潜力。

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

1. 一次抬起两条腿:同时抬起左前和右后，然后同时抬起右前和左后。它们必须是相对的腿以保持平衡。

2. 没有抬起的腿应该保持在地面上，但在场景中向后移动以模拟 body 相对于它们的位置向前移动的事实。

3. 由于双腿在地面上是向后滑动， body 自然会略微下沉。

4. 如果您想增加更多的真实感，请在抬起的腿再次到达地面后让 body 稍微进一步下降，然后再站起来。这将使重量看起来像是转移到那些腿上。