どうもKJ9です。
ここまでで「SVGでボール描いた」っていう実験をやってきました。

今回はそのボールを 画面上でバウンドさせる、いわゆる「シュート練習してる時に床に落ちたボールっぽい演出」を作ります。CSSだけで動かすから、JSなしでも動きが作れるのがポイント。

基本コンセプト

バウンドの動きを作るには、CSSの @keyframes と transform: translateY() を組み合わせます。さらにちょっとリアルっぽくするならこう。

• 落下時にボールが潰れる（scaleY縮小 + scaleX拡大）
• 上昇時に少し伸びる（scaleY伸張 + scaleX縮小）

こういう 「潰れ＆伸び」 の表現を加えると、単純な上下運動でも生き生きして見えます。

See the Pen Untitled by dipcode_kj (@dipcode_kj) on CodePen.

ポイント解説

animation: bounce

• 上下運動を2秒で繰り返すループ。ease-in-outで自然な加速減速を演出。

transform-origin: center bottom

• ボールの底を基準に潰れる演出を加えることで、重力っぽさを表現。

scaleX / scaleY

• 上下運動に伴い、横に広がったり縦に潰れたりさせるとリアル。

応用アイデア

• SVGボールの色をチームカラーに変える
• animation-delay を変えて複数のボールを順番にバウンド
• JSと組み合わせてクリックでシュート演出にする
• 前回作った stroke-dasharrayアニメーション と組み合わせて「描かれながらバウンド」も可能

まとめ

CSSだけでもここまで動きのある演出が作れる。
ブログに埋め込むと、静止画よりも読者の目を引きやすいし、バスケ感が増す。次のステップは、ここまで作ったSVGボールを使って PHPで「今日のシュート運」占い」 を作ると、シリーズ完結感が出る。

それじゃあ今回はこの辺で、
良いバスケットライフを！