モーフィングBlobアニメ
有機的にぐにゃぐにゃと形を変える、Blob（液体のような塊）アニメーションです。技術的には CSS だけで完結しており、JavaScript は使いません。仕掛けは border-radius を四隅ばらばらの比率（例： 60% 40% 30% 70%/60% 30% 70% 40% ）で指定し、 @keyfram…
解説
有機的にぐにゃぐにゃと形を変える、Blob（液体のような塊）アニメーションです。技術的には CSS だけで完結しており、JavaScript は使いません。仕掛けは border-radius を四隅ばらばらの比率（例：60% 40% 30% 70%/60% 30% 70% 40%）で指定し、@keyframes morph で複数のキーフレームの間を ease-in-out で行き来させる点にあります。各時点で角の丸みが違うため、輪郭がなめらかに変形して見えるわけです。背景は紫系のグラデーション、中央にはテキストを重ねています。
使う場面
- ヒーローセクションの背景に、静止画にない動きを足したいとき
- ロゴやキャッチコピーの後ろに置く装飾
- サービス紹介のアクセントになる柔らかいビジュアル
変形の速さは animation の 6s を増減して調整します。色は linear-gradient の2色を差し替えるだけでブランドカラーに馴染ませられます。形の振れ幅を変えたいときは各キーフレームの border-radius の数値をいじります。常時動く装飾なので、動きに敏感な人向けに prefers-reduced-motion でアニメーションを止める配慮を加えると安心です。
使用例・適したシーン
- ヒーロー背景
- セクション装飾
- イラスト的な訴求
よくある質問
JavaScriptは必要ですか？
不要です。border-radiusとkeyframesだけで動くCSSのみのアニメーションなので、HTMLに要素を置いてスタイルを当てるだけで動作します。軽量で、表示負荷もほとんどかかりません。
色や形を自分のブランドに合わせたいです。
色はlinear-gradientの2つのカラーコードを変えるだけで調整できます。形の崩れ具合を変えたいときは、morphの各キーフレームのborder-radiusの数値を編集すると、より丸くも、より歪んだ形にもできます。