背景装飾の定番、ゆっくり漂う半透明の円。duration違いの同じアニメーションを重ねて有機的な動きを作ります。
プレビュー枠は右下をドラッグすると高さを変えられます
書き換えるとプレビューに即反映されます。変更はこのページ内だけで、リロードすると元に戻ります。
3つの円はすべて同じ@keyframes floatを共有していますが、animation-durationとdelayをバラバラにすることで、同期しない有機的な漂いになります。alternateで往復させているのでループの継ぎ目はありません。「同じ動き×違う周期」は少ないコードで複雑さを演出する常套手段です。
円の数を増やすほどリッチになりますが、blurは負荷が高めなので枚数と半径はほどほどに。