# ふわふわ浮かぶ玉のCSSアニメーション実装

> 背景装飾の定番、ゆっくり漂う半透明の円。duration違いの同じアニメーションを重ねて有機的な動きを作ります。

- カテゴリ: 背景・装飾
- URL: https://www.css-dictionary.com/animations/floating-blobs/

## HTML

```html
<div class="blobs">
  <span class="blob b1"></span>
  <span class="blob b2"></span>
  <span class="blob b3"></span>
</div>
```

## CSS

```css
.blobs {
  position: relative;
  width: 260px;
  height: 160px;
  border-radius: 12px;
  background: #f7f1e3;
  overflow: hidden;
}

.blob {
  position: absolute;
  border-radius: 50%;
  opacity: 0.55;
  filter: blur(2px);
  animation: float ease-in-out infinite alternate;
}

.b1 {
  width: 90px; height: 90px;
  left: 20px; top: 30px;
  background: #d98a71;
  animation-duration: 6s;
}

.b2 {
  width: 60px; height: 60px;
  right: 40px; top: 20px;
  background: #9db4d0;
  animation-duration: 9s;
}

.b3 {
  width: 70px; height: 70px;
  right: 70px; bottom: 10px;
  background: #d0b271;
  animation-duration: 7.5s;
  animation-delay: 1s;
}

@keyframes float {
  to { translate: 14px -18px; }
}

@media (prefers-reduced-motion: reduce) {
  .blob { animation: none; }
}
```

## 仕組みの解説

3つの円はすべて同じ@keyframes floatを共有していますが、animation-durationとdelayをバラバラにすることで、同期しない有機的な漂いになります。alternateで往復させているのでループの継ぎ目はありません。「同じ動き×違う周期」は少ないコードで複雑さを演出する常套手段です。

## 実装のポイント

円の数を増やすほどリッチになりますが、blurは負荷が高めなので枚数と半径はほどほどに。

## 使っているプロパティ

- [animation](https://www.css-dictionary.com/property/animation.md)
- [keyframes](https://www.css-dictionary.com/property/keyframes.md)
- [transform](https://www.css-dictionary.com/property/transform.md)
- [filter](https://www.css-dictionary.com/property/filter.md)
- [opacity](https://www.css-dictionary.com/property/opacity.md)
- [overflow](https://www.css-dictionary.com/property/overflow.md)