【CSSアニメーション】バウンドのような跳ねる動きの実装方法を解説します。

なやむくん

要素をバウンドしているようなアニメーションを実装したい。

なやむさん

跳ねる動きを実装したい

などの疑問や悩みを解決してまいります。

小規模のアニメーションであればCSSのanimationプロパティと@keyframesを使用して実装することができます。

しかし、日常にある動きをアニメーションとして実装する場合はなかなかリアルな動きを再現できずに苦労している方も多いかと思います。

今回は日常においても必ず見たことがあるであろう、物体が「バウンド（跳ねる）」の動きを実装していきます。

みつた

今回はボールを地面にたたきつけたようなイメージで、そのときのボールの変形と動きについて解説していきます。

完成例を見てみましょう。

以下が完成例になります。

See the Pen バウンドアニメーション by koutarou mori (@koutarou-mori) on CodePen.

それでは早速解説していきます。

みつた

HTMLは一文しかないので解説は特にありません！

CSSの解説

CSSコードを解説していきます。

みつた

アニメーションに関する箇所のコードを解説していきますね。

body {
    /* ボールを中心に */
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
}
.ball {
    /* ボールのレイアウト */
    background-color: #5694c6;
    border-radius: 50%;
    width: 200px;
    height: 200px;

    /*animationプロパティここから*/
    animation-name: bounce;
    animation-duration: 1s;
    animation-iteration-count: infinite;
    animation-timing-function: linear;
    transform-origin: center bottom;
}
@keyframes bounce {
    0%   { transform: scale(1.0, 1.0) translate(0%, 0%); } /* 初期状態 */
    30%  { transform: scale(1.5, 0.5) translate(0%, 0%); } /* 地面に着地し、その変動で潰れだす */
    40%  { transform: scale(1.0, 1.0) translate(0%, 0%); } /* 潰れた反動で一瞬元に戻る */
    50%  { transform: scale(0.8, 1.3) translate(0%, -70%); } /* 潰れた反動で縦に伸び、その勢いでバウンド開始 */
    60%  { transform: scale(1.0, 1.0) translate(0%, -120%); } /* 潰れた反動が終り、空中で元に戻る */
    100% { transform: scale(1.0, 1.0) translate(0%, 0%); } /* 初期状態に戻る */
}

animation-nameプロパティでアニメーションに名前を付ける

CSSアニメーションを実装するためにアニメーションに名前を付けなくてはいけません。

アニメーションに名前を付けるにはanimation-nameプロパティを使用します。

今回はわかりやすく「bounce」と指定しています。

みつた

ここは自分のわかりやすい名前でOKです。

animation-durationプロパティでアニメーションの再生時間を指定

今回こちらのバウンドアニメーションはアニメーションの再生1回につき1秒に設定しています。

このアニメーションの再生時間を指定するのがanimation-durationプロパティです。

今回は再生時間を１秒としているので、値に1sと記載しています。

なお時間指定の単位の意味は以下の通りです。

animation-iteration-count: infinite;で繰り返し再生

animation-iteration-count: infinite;はアニメーションを繰り返し再生してくれるプロパティです。

よろこびくん

infiniteは「無限」を意味するので覚えやすいですね！

animation-timing-functionプロパティで再生加速度を設定

animation-timing-functionプロパティを使用することで、アニメーション途中の加速度を変更することができます。

みつた

例えばアニメーション開始直後のスピードを早めにして、終了近くなったらスピードを緩やかにする、、、といったことが可能になります。

指定できる値は以下の通りです。

今回はlinearを使用しています。

transform-originプロパティで変形となる基点を決める

イメージしてほしいのですが、落ちたボールは地面に密着しながら落ちた反動で潰れます。

地面に密着しながらということは、ボールの下側の位置は固定されたままということです。

みつた

地面より下に位置が移動することはないですよね。（地面が柔らかければ話は別ですが、今回はコンクリートのように固い地面をイメージしてほしいです）

なのでアニメーションの起点を要素の下にしたいときなどに使うのがtransform-originプロパティです。

transform-originプロパティを使用することで、要素の下を変形の基点とすることができます。

@keyframeにはtransformプロパティのscale()関数とtranslate()関数を指定

scale()関数は要素の拡大・縮小することができ、translate()関数は要素の位置を指定することができます。

要素をバウンドさせる際に必要な動きは、ボールが跳ねる動きとバウンドしたときにボールが変形する動きです。

そのため跳ねたときの上下の動きをtranslate()関数、つぶれたときに変形するボールの形をscale()関数で再現しています。

これを@keyframesで%毎に数値をそれぞれ指定してあげることでボールが弾む動きを実現することができます。

みつた

よりリアルに表現するには、実際にその動きをスローモーションで見ながら細かく指定してあげることで、リアルな動きを実現することができます！

本記事のまとめ

ここまで読んでいただきありがとうございました。

本記事のまとめです。