【縛りプレイ】1パターンのkeyframesで走るサンタを動かす

これはCSS Advent Calendar 2019の6日目の記事です。

See the Pen Santa animated with one keyframe by keisuke Takahashi (@ksksoft) on CodePen.default

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の指定にこそ、カスタムプロパティを使うべきです。

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

カテゴリー: css3 パーマリンク

シェア

コメントを残す

メールアドレスが公開されることはありません。 が付いている欄は必須項目です

CAPTCHA


このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください