【CSS】CSSだけでピョンピョン跳ねるボールを作ってみる

ボールがピョンピョン跳ねる様に見える動きをCSSだけで作ってみたいと思います。
落下初動と着地地点の動きが跳ねる感じを見せる重要点ですね。

動きのイメージ動画

こんな感じでピョンピョン跳ねるボールをCSSで作ってみたいと思います。
影を追加する事で、より地面とボールとの距離感が分かりやすくなると思います。

HTML

ベースになるHTMLは以下になります。
ボールになる方のクラス名は「ball」、影になる方は「shadow-box」になっています。

CSS一式

CSS一式はこんな感じになります。
次の項目から部分の詳細説明をしていきます。

ピョン跳ねボールの設定

まずはピョンピョン跳ねるボールを設定していきましょう。

ボールの形を作ります

丸い形はwidthとheightサイズ(200px)に角丸設定の「border-radius」を100pxに設定する事で丸くなります。
横縦100pxに設定するならborder-radiusは50pxといったように、「半分」の数値を設定します。

重要なのは「animation」です。
animationの設定は以下の様になっています。

0.7s

速度の設定です。数値を上げれば上げる程ゆっくりになります。

cubic-bezier

これはイージングの設定になります。
CSSのanimationでは「ease-in」「ease-out」の様にイージングを設定する事ができますが、今回使っている「cubic-bezier」はより細かなイージングの設定をする事ができます。

infinite

infiniteは無限にアニメーションを繰り返すタグです。
ボールがエンドレスで跳ねてる様に見えますが、これは無限にアニメーションを繰り返す「infinite」を使っているのでそう見えています。

alternate

alternateは順方向から逆方向を繰り返すタグになっています。
これが無いと、ボールが上から下へ動くアニメーションを繰り返すだけで跳ねるボールにはなりません。

ボールのアニメーションを作ります

animation-name

cssアニメーションはこの「animation-name」が無いと動きません。任意で設定しましょう。
ここでは跳ねるアニメーションなので「bound」という名前にしました。

@keyframes

アニメーションを付けていきます。
fromは最初(ボールがスタートする位置)、toは最後(ボールが落ちた位置)として、各パーセントの時の位置とボールの形を設定していきます。

  • translateYは縦軸の位置
  • scaleはボールの形

ボールが落ちた瞬間から一番下に落下するまで同じスピードではなく、落下速度は徐々に上がっていきます。
最初はゆっくり、最後は一番早くと考えてtranslateYを設定します。

ボールの形はスピードが上がると若干ボールが縦長になり、一番下に落ちた時はボールが潰れます。
衝撃があっても同じ形では跳ねる事は出来ませんので、柔らかなボールになる様に各位置で「scale」を設定します。
(※(1,1)が正円として考えます)

影を設定していきます

ボールの影を作っていきます。
ボールと地面との距離で影のサイズを変更する事で距離感がより分かりやすくなります。

影の形を作ります

影は正円ではなく横長の長円にするので、widthとheightサイズを調整して横長になる様にします。
border-radiusを50%にする事で丸くなります。

ここでも重要なのは「animation」。
animationの設定は以下の様になっています。

0.7s

速度の設定です。数値を上げれば上げる程ゆっくりになります。

ease-in

これはイージングの設定になります。
ボールはcubic-bezierを使って細かな設定しましたが、影はease-inで綺麗に動いたのでこっちを採用しました。

infinite

infiniteは無限にアニメーションを繰り返すタグです。
ボールがエンドレスで跳ねてる様に見えますが、これは無限にアニメーションを繰り返す「infinite」を使っているのでそう見えています。

alternate

alternateは順方向から逆方向を繰り返すタグになっています。
これが無いと、ボールが上から下へ動くアニメーションを繰り返すだけで跳ねるボールにはなりません。

影のアニメーションを作ります

animation-name

ボールと同じ様に「animation-name」を任意で設定しましょう。
ここでは「shadow-black」という名前にしました。

@keyframes

アニメーションを付けていきます。
fromは最初(ボールがスタートする位置)、toは最後(ボールが落ちた位置)として、各パーセントの時の位置と影の形を設定していきます。

  • scaleは影の形
  • opacityは透過(透明化)

ボールと地面との距離が開けば開くほど円を大きくし影を薄く、逆に地面が近ければ円を小さくし影を濃くしています。
そうする事で距離感が分かりやすくなります。

まとめ

ボールの下の方に影を付けると、もっとリアルな立体感が出るかもしれないです。

CSSアニメーションは楽しいですね。
このボール様な動きはFlash(現在Animate)で良く作っていたのですが、今ではCSSだけで出来る様になったんですね。
JS無しでもできるアニメーション。色々試してみたいですね。

CSSコーディングのオススメ本

CSS辞典 第5版 [CSS2/3/4対応]

本書は、Webデザインに必須の技術「CSS」の文法リファレンスです。大幅改訂となる第5版は、現時点の最新状況を反映し、Web制作を学ぶなら必ず押さえておきたい基本のCSS2.1、仕様の策定とブラウザでの実装が進められているCSS3、さらにはその次の規格であるCSS4(Level4モジュール)まで掲載しています。

Web制作者のためのCSS設計の教科書 モダンWeb開発に欠かせない「修正しやすいCSS」の設計手法 Web制作者のための教科書シリーズ

予測しやすい、保守しやすい、最利用しやすい、拡張しやすい―コンポーネントやCSSプリプロセッサを意識した設計・管理の実践など、「ちゃんとCSSを書く」ためのプロの考え方を徹底解説!

1冊ですべて身につくHTML&CSSとWebデザイン入門講座

知識ゼロから体系的に学べる!HTMLとCSSの基本。最新の技術に対応!レスポンシブ、Flexbox、CSSグリッド。手を動かしながら学べる!プロの現場で役立つテクニック。コードの知識からデザインのことまで1冊ですべて学べる!

初心者からちゃんとしたプロになる HTML+CSS標準入門

HTML&CSSの使い方が全部わかる。プロを目指すなら、最初に選ぶ本!