2019の6日目の記事です。CodePen.defaultCSSの縛りプレイとは?なんらかの制約を己に課してゲームをすることを「縛りプレイ」とか「やりこみプレイ」などと表現します。CSSの縛りプレイでよくあるのは「html要素を1つだけ使ってイラストを描く」とかです。「CSSの縛りプレイ」という意味では「Javascriptは使わない」は大前提です。今回は「keyframesを1つしか使わない」という制約で、闇夜を走るサンタを動かしてみました。以下、この記事に貼り付けてあるCodepenのCSSを適宜、参照してください。いうのがサンタですが、そこでCSSカスタムプロパティを定義しています。角度計算に使う為の指数です。keyframesは0degからXdegまでrotateするよ、という意味です。–rが.25の場合は、1/4回転します。手前の腕の振りはこう指定しています。.armの2つのvar()は、animation-durationとanimation-delayです。.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の指定にこそ、カスタムプロパティを使うべきです。興味が湧いた人は、足跡をどう表現しているのか、ソースを見ずに考えてみましょう。コメントをキャンセルメールアドレスが公開されることはありません。*サイト上に表示された文字を入力してください。コメントデータの処理方法の詳細はこちらをご覧ください。designerのKSKです。このサイトのコンテンツはhtml5やCSS3の情報や実装で構成しているので、これらをサポートしているブラウザ(FirefoxやChrome)で閲覧することを推奨します。WordPress.。