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

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

  1. TOP >
  2. Web制作 >
  3. CSS >

CSS Web制作 アニメーション

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

2024年4月15日

※本記事は広告が含まれる場合があります。

なやむくん要素をバウンドしているようなアニメーションを実装したい。 なやむさん跳ねる動きを実装したい

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

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

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

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

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

本記事の目次

  • 1 完成例を見てみましょう。
  • 2 CSSの解説
    • 2.1 animation-nameプロパティでアニメーションに名前を付ける
    • 2.2 animation-durationプロパティでアニメーションの再生時間を指定
    • 2.3 animation-iteration-count: infinite;で繰り返し再生
    • 2.4 animation-timing-functionプロパティで再生加速度を設定
    • 2.5 transform-originプロパティで変形となる基点を決める
    • 2.6 @keyframeにはtransformプロパティのscale()関数とtranslate()関数を指定
  • 3 本記事のまとめ

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

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

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と記載しています。

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

単位内容s秒単位を示し、1sとすると1秒ということになるmsミリ秒単位を示し、1000msで１秒となる（0.5sだと500msと同じになり0.5秒ということになる） animation-iteration-count: infinite;で繰り返し再生

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

よろこびくんinfiniteは「無限」を意味するので覚えやすいですね！ animation-timing-functionプロパティで再生加速度を設定

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

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

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

値効果linear一定のスピードで変化ease（初期値）開始時と終了時をゆっくり変化ease-in最初はゆっくりで、だんだん速くease-out最初は速く変化し、だんだんゆっくり変化ease-in-out「ease」よりも開始時と終了時をさらにゆっくり変化step-start開始時に最後の段階へ一気に変化step-end終了時に最後の段階へ一気に変化

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

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

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

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

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

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

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

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

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

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

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

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

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

本記事のまとめ

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

本記事のまとめです。

ポイント

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

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

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

○　animation-timing-functionプロパティでアニメーションの再生加速度を設定

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

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

○　よりリアルにアニメーションさせるには別の同じ動画をスローモーションで確認しながら値を調整

  • Pocket
  • Hatena
  • Pinterest
  • LINE

-CSS, Web制作, アニメーション

📎📎📎📎📎📎📎📎📎📎
BOT