CSSアニメーションでロボットを動かしてる人が居たので、Forkして遊んでみた

何気なくCodePenを見ていたら、トップページにこんなのがありました。



これはjavascript無し、CSSアニメーションだけで動かされたロボットですが、少し気になる部分があったので、Forkして遊んでみることにしました。

※端末により、アニメーションに見えない方もいるかもしれませんがご了承ください。

何が気になるか

私がパッと見で気になったのは、以下の点です。

1. 腕と肩の位置がズレている
2. 胴体と脚の付け根の位置がズレる

というわけで、つまり胴体とその他周辺部位のズレが気になったんですね。

これはこれで機械っぽくてカワイイのですが、せっかくなので気になった部分を簡単に修正してみました。

変更後

変更したものがこちら。



周囲のパーツは胴体部分と一緒に動くよう、親タグの中に入れ子にしました。

肩周りの動きについては、元のものよりはだいぶなめらかになった感じがします。

ただ、脚の傾きを胴体に合わせた状態だと、どうしても足踏みの動作に違和感が出てしまうため、その場で腰をくねくねさせているイメージになってしまいました。

あと首については、元の動きのほうが「ロボットっぽさ」があり、愛着が湧いてくる気がしますね。

全体的に見て、元の動きはロボットが「歩いている感じ」で、私の修正したものは「踊っている感じ」となりました。

結論

何かを求めると、何かを失うことになるようです。


Photo via Visual Hunt