ブロブアニメーションの作り方

border-radius を4つの値でランダムっぽく変化させ続けると、あの「ぷにょぷにょした水玉」が作れます。回転とスケールも一緒に animate すると、より有機的な動きになって水飴っぽさが増しました。

border-radius を8つの値で指定する

border-radius はスラッシュ区切りで水平・垂直それぞれ4つ、計8つの値を指定できます。42% 58% 63% 37% / 45% 42% 58% 55% のように非対称な値にすると、円がゆがんだ「ブロブ」の形になります。この8つの値を keyframes で少しずつ変化させるのが基本です。

コツは、8つの値の合計バランスを大きく崩さないことです。1辺だけ極端な値にすると水玉ではなく「潰れた何か」になります。各値を 35%〜65% の範囲に収めて、対になる値(42% と 58% のような)をだいたい 100% 前後に保つと、体積が保存されているような自然な揺れになります。

回転とスケールを重ねる

形のモーフィングだけだと単調なので、rotate と scale も同じ keyframes の中で数度・数%だけ揺らします。大きく動かすと騒がしくなるので、あくまで「呼吸している」くらいの振れ幅に抑えるのがコツでした。

複数のブロブを並べるときは、animation-duration と animation-delay を1個ずつ変えるのが重要です。全員が同じ周期で動くと途端に機械的に見えます。このサイトではページを開くたびに JS で周期をランダムに割り振り、さらに負の delay でアニメーションの途中から再生を始めることで、いつ見ても違う表情になるようにしています。

blur でとろみを足す

仕上げに filter: blur() を 1〜2px だけかけると、輪郭がやわらかくなって水飴のような質感になります。かけすぎるとただのぼやけた円になるので、ここも控えめが肝心です。

drift と morph は要素を分ける

1つ落とし穴があって、「漂う移動(translate)」と「形の変化」を同じ要素のアニメーションに書くと、どちらも transform を取り合って喧嘩します。このサイトでは外側のラッパーが drift(translate + rotate)を、内側のブロブが morph(border-radius)を担当する2層構造にして解決しました。アニメーションを役割ごとに要素へ分けるのは、CSS アニメーション全般で使える定石だと思います。