CSSのアニメーションで、クリーチャを作ってみました。

当初は何とも線虫っぽくて気持ち悪かったので、目玉などをつけて愛嬌を出しております。

例によってmozillaとwebkitで動くようにしていますが、PCのパワーが足りないと、スムーズにアニメーションしないかもしれません。

しばらく見ていると、２体目が出てきますが、体節を動かす@keyframesや、出現移動をさせる@keyframesは共通のものを使っているのが工夫ポイントです。体節の長さを変えたり、animation-durationを変えて、大きさの違いを強調してみました。

また、多関節風にする為に、要素を入れ子のabsoluteにして、直接の親を基準にpositionしています。その上で、animation-delayを節ごとに遅らせると、体節がウネウネする、という仕組みです。

以下に、ソースをのせておきます。

html

css（ベンダープレフィックスは省略しています）