CSSの縛りプレイとは？

なんらかの制約を己に課してゲームをすることを「縛りプレイ」とか「やりこみプレイ」などと表現します。

CSSの縛りプレイでよくあるのは「html要素を1つだけ使ってイラストを描く」とかです。

また、「CSSの縛りプレイ」という意味では「Javascriptは使わない」は大前提です。

今回は「keyframesを1つしか使わない」という制約で、闇夜を走るサンタを動かしてみました。

keyframesの工夫

以下、この記事に貼り付けてあるCodepenのCSSを適宜、参照してください。

.run というのがサンタですが、そこでCSSカスタムプロパティを定義しています。5つ目までがアニメに使う秒数で、–r は rotate の角度計算に使う為の指数です。

keyframesは0degからXdegまでrotateするよ、という意味です。–rが.25の場合は、1/4回転します。例えば手前の腕の振りはこう指定しています。

.run .armの2つのvar()は、animation-durationとanimation-delayです。.run .right .armでは、animation-durationには0.9sが、animation-delayは、–hの半分の秒数である、–t2を指定したので、0.45sが入ります。同じkeyframesでも、開始するタイミングをずらすことで、左右の腕が振れる様になります。

パーツによって回転させたい角度が違う場合は、各パーツのセレクタで、–rを上書きします。奥の腕の指定はこうしています。

–rを0.28に上書きしたので、ちょっとだけ、腕の回転する角度が大きくなります。

スローモーションもできます。

サンタにマウスホバーするとスローモーションになります。

hover時には、サンタのanimation-durationが0.9sから3sになります。カスタムプロパティはカスケードするので、サンタの子孫要素の他のパーツのanimation-durationもvar(–t)で指定しておくことで、全てのアニメを同時にスローモーションにできる、という仕組みです。

まとめ

keyframeが一つでも、カスタムプロパティと組み合わせると、かなり自由にアニメーションできます。animationの指定にこそ、カスタムプロパティを使うべきです。

興味が湧いた人は、足跡をどう表現しているのか、ソースを見ずに考えてみましょう。