CSSアニメーションで「バウンド」を実装する

よこのじ（@yokonoji_work）です。

CSSアニメーションでボールがバウンドするような動きを実装してみましたので、紹介します。

基本的な動きなので小さな要素に適用したり、画面全体を使うようなアニメーションにでも応用できるかと思いますので、ぜひチャレンジしてみてください。

バウンドの完成形

今回はボールが自由落下したようなアニメーションと、上下に跳ねるアニメーションを作ってみました。

ソースファイルはGitHUBに保存しています。

• bound.html
• bound.css

[adchord]

バウンドの実装方法

自由落下のアニメーション（左側）

まずは、ボール自体のCSS部分ですが、このようになっています。

.bound div:nth-child(1){
  display: inline-block;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background-color: #d7faf8;
  transform: translate(0%,0%);
}

縦横40pxの円形です。アニメーションプロパティでtransform: translate(0%, 0%); の部分を変動させますので、ここではX軸・Y軸ともに初期値0％にしています。

animation プロパティは、linear で一定速度で動くようにしています。アニメーション時間は3秒で、繰り返し（infinite）です。

.bound div:nth-child(1){
  animation : bound1 3.0s linear 1.0s infinite normal none running;
}

keyframes はこのような作りになっています。

@keyframes bound1{
  0%{
    transform: translate(0%,0%);
  }
  30%{
    transform: translate(0%,400%) scale(0.95);
  }
  40%{
    transform: translate(0%,300%);
  }
  55%{
    transform: translate(0%,400%) scale(0.95);
  }
  60%{
    transform: translate(0%,350%);
  }
  70%{
    transform: translate(0%,400%) scale(0.95);
  }
  75%{
    transform: translate(0%,380%);
  }
  100%{
    transform: translate(0%,400%);
  }
}

アニメーションの開始0%と終了100%の間で細かく設定を行っており、地面に接地したとき400％で scale(0.95); にすることで、少しボールが潰れたような動きをさせています。

より自然にバウンドを表現する場合は %の刻みを細かくすればバウンドと落下をうまく表現できるかと思います。

上下に跳ねるアニメーション（右側）

ボール部分については、先ほどと同じです。

.bound div:nth-child(2){
  display: inline-block;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background-color: #d7faf8;
  transform: translate(0%,0%);
}

animation プロパティについてもアニメーション間隔が1.0sになっているだけです。

.bound div:nth-child(2){
  animation : bound2 1.0s linear 1.0s infinite normal none running;
}

keyframes は次のとおりです。

@keyframes bound2{
  0%{
    transform: translate(0%,0%);
  }
  50%{
    transform: translate(0%,400%);
  }
  100%{
    transform: translate(0%,0%);
  }
}

アニメーション間隔は1.0sで、50%で一番下に落ちて100%で上側に戻りますので、0.5sで落ちて0.5sで戻るというアニメーションになっています。

translate でY軸方向を0%と400%で行き来させているだけですので、先ほどのアニメーションよりはシンプルですね。

以上、上下のバウンドアニメーションでした。ぜひご自身の手でアニメーションを動かしてみてください。

上下移動のアニメーションができれば画面遷移で幕の上げ下げのようなことにも応用できるので、表現の幅が広がると思います！