css - CSS3アニメーションの合理化@keyframes

Question

数か月前、アニメーションのCSS3AT-AThttp://www.ruawebdesign.com/css3-at-atを作成しました。私は主に学習実験としてそれを構築し、新しいCSS3機能を使用して何が可能かを確認しました。私たちが構築するほとんどのものと同様に、私はそれをネットにリリースしました。私はそれが受け取ったサイトへの大量のトラフィックを期待していませんでした。友人や仕事仲間からの視聴回数は数回だと思いましたが、それでも世界中から週に数百回の視聴回数があります。

結果として、CPU使用率に関してもう少し合理化したいと思います。何らかの理由で、アニメーションはメモリを抑制します。スタックオーバーフローについての素敵な人々からのフィードバックをいただければ幸いです。ファンが参加しなくても、私の実験を見ることができます。

また、誰かがjavascript / jqueryの代替案を提案する前に、CSS3の機能をテストするためにこれを作成したことを思い出してください。

前もって感謝します。

Answer 1

よくやった。あなたのおかげで、CSS3 のアニメーションの可能性に目を向けることができました。

残念ながらあなたの質問にはお答えできませんが、私はアニメーターになるための訓練を受けているので、あなたのアニメーションを改善するのに役立ついくつかの提案をすることができます:

1. 一度に 2 本の脚を持ち上げます。左前と右後ろを同時に上げ、次に右前と左後ろを同時に上げます。バランスをとるために、それらは反対側の脚でなければなりません。

2. 持ち上げられていない脚は地面に置いたままにしておく必要がありますが、シーン内で後方に移動して、体がその位置に対して前方に移動しているという事実をシミュレートします。

3. 地面についた脚が後ろにスライドするので、自然と体が少し下がります。

4. さらにリアリズムを追加したい場合は、持ち上げた脚が再び地面に着いた直後に体を少し下げてから、元に戻します。これにより、体重がそれらの脚に移動しているように見えます。