【CSS】ボールがバウンドするアニメーション

動点P

いい跳ね方をしているボールを作りたい！

動点Qちゃん

シンプルなようで難しいのです・・・

@keyframes

バウンドするボール

@keyframes bounce {
      0% {
        margin-top: 10px;
        transform: scaleY(0.4);
	transform-origin: top center;
      }
      3.3% {
        margin-top: 10px;
        transform: scaleY(0.4);
        transform-origin: top center;
      }							      
      5.5% {
         margin-top: 10px;
        transform: scaleY(0.4);
	transform-origin: top center;
      }					      
      12.5% {									            
        margin-top: 10px;
        transform: scaleY(0.5);
	transform-origin: top center;
      }
       25% {
        transform: scaleY(1.0);
	transform-origin: center;
      }
      50% {
        transform: scaleY(1.1);
	transform-origin: center;
      }
      75% {
        transform: scaleY(1.0);
	transform-origin: center;
      }						                
      80% {
        margin-top: 200px;
        transform: scaleY(0.6);
	transform-origin: bottom center;
      }							          
       87% {
        margin-top: 200px;
        transform: scaleY(0.5);
	transform-origin: bottom center;
      }
        90% {
        transform: scaleY(0.4);
        margin-top: 200px;
	transform-origin: bottom center;
      }
      100% {
        transform: scaleY(0.4);
        margin-top: 200px;
	transform-origin: bottom center;
      }
    }
 @keyframes push {
      0% {
        width: 130px;
      }
      25% {
        width: 100px;
      }
      50% {
        width: 80px;
      }
      75% {
        width: 100px;
      }
      100% {
        width: 130px;
      }
    }

animation: bounce .7s cubic-bezier(0.45, 0, 0.55, 1)  0s infinite alternate, push .7s cubic-bezier(0.45, 0, 0.55, 1)  0s infinite alternate;

上下に動くbounceと横の幅の増減を動かすpushという２つのanimationをつけています。

やわらかい弾むボールの場合、ボールの形が変わったり、上下で物にぶつかった瞬間にちょっと時間を溜めて動きをデフォルメするとかわいいかなと思いました。

アニメーション実行スピード調整には今回cubic-bezierを使いました。他にもイージングの値があります。

値	動き
ease	デフォルト：開始と完了を滑らかに
linear	速度一定
ease-in	ゆっくり始まる
ease-out	ゆっくり終わる
ease-in-out	ゆっくり始まりゆっくり終わる
cubic-bezier(x1,y1,x2,y2)	ベジェ曲線で指定
steps	spriteなどのコマ撮りアニメに使う