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

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

1 動きのイメージ動画
2 HTML
3 CSS一式
4 ピョン跳ねボールの設定
5 影を設定していきます
6 まとめ
7 CSSコーディングのオススメ本

動きのイメージ動画

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

HTML

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

<div class="box">
	<div class="ball"></div>
	<div class="shadow-box"></div>
</div>

CSS一式

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

.box{
	width: 200px;
	margin: 0 auto;
}


/*ボール---------------*/
.ball {
	position: relative;
	z-index: 1;
	margin: 0 auto;
	padding: 0;
	background: #21b1c4;
	width: 200px;
	height: 200px;
	border-radius: 100px;
	box-sizing: border-box;
	animation: 0.7s cubic-bezier(.662,.115,.88,.1) infinite alternate;
}

.ball { animation-name: bound; }

@keyframes bound {
	from  { transform: translateY(0vw) scale(1,1); }
	10%  { transform: translateY(0.2vw) scale(1,1); }
	20%  { transform: translateY(0.5vw) scale(1,1); }
	96%  { transform: translateY(26vw) scale(1,1); }
	97%  { transform: translateY(28vw) scale(0.9,1); }
	98%  { transform: translateY(29vw) scale(0.9,0.8); }
	99%  { transform: translateY(29.7vw) scale(1,0.5); }
	to { transform: translateY(30vw) scale(1,0.5); }
}


/*影---------------*/
.shadow-box{
	position: relative;
	top: 25vw;
	margin: 0 auto;
	width: 200px;
	height: 40px;
	background-color: #b1a05e;
	border-radius: 50%;
	filter: blur(3px);
	animation: 0.7s ease-in infinite alternate;
}

.shadow-box{animation-name: shadow-black;}

@keyframes shadow-black {
	from  { transform: scale(1,1); opacity: 0.3;}
	10%  { transform: scale(1,1); opacity: 0.3;}
	90% { transform: scale(0.8,0.8); }
	95% { transform: scale(0.5,0.5); opacity: 0.8; }
	99% { transform: scale(0.2,0.2); opacity: 0; }
	to { transform: scale(0.2,0.2); opacity: 0; }
}

ピョン跳ねボールの設定

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

ボールの形を作ります

.ball {
	position: relative;
	z-index: 1;
	margin: 0 auto;
	padding: 0;
	background: #21b1c4;
	width: 200px;
	height: 200px;
	border-radius: 100px;
	box-sizing: border-box;
	animation: 0.7s cubic-bezier(.662,.115,.88,.1) infinite alternate;
}

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

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

.ball { animation-name: bound; }

@keyframes bound {
	from  { transform: translateY(0vw) scale(1,1); }
	10%  { transform: translateY(0.2vw) scale(1,1); }
	20%  { transform: translateY(0.5vw) scale(1,1); }
	96%  { transform: translateY(26vw) scale(1,1); }
	97%  { transform: translateY(28vw) scale(0.9,1); }
	98%  { transform: translateY(29vw) scale(0.9,0.8); }
	99%  { transform: translateY(29.7vw) scale(1,0.5); }
	to { transform: translateY(30vw) scale(1,0.5); }
}

animation-name

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

@keyframes

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

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

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

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

影を設定していきます

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

影の形を作ります

.shadow-box{
	position: relative;
	top: 25vw;
	margin: 0 auto;
	width: 200px;
	height: 40px;
	background-color: #b1a05e;
	border-radius: 50%;
	filter: blur(3px);
	animation: 0.7s ease-in infinite alternate;
}

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

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

0.7s

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

ease-in

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

infinite

alternate

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

.shadow-box{animation-name: shadow-black;}

@keyframes shadow-black {
	from  { transform: scale(1,1); opacity: 0.3;}
	10%  { transform: scale(1,1); opacity: 0.3;}
	90% { transform: scale(0.8,0.8); }
	95% { transform: scale(0.5,0.5); opacity: 0.8; }
	99% { transform: scale(0.2,0.2); opacity: 0; }
	to { transform: scale(0.2,0.2); opacity: 0; }
}

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モジュール)まで掲載しています。