# パルスリング（波紋）のCSSアニメーション実装

> 通知ドットやライブ配信中バッジで使われる、波紋が広がり続ける演出。scaleとopacityの同時アニメーションです。

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

## HTML

```html
<div class="live">
  <span class="dot"></span>
  配信中
</div>
```

## CSS

```css
.live {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 14px;
  font-weight: 600;
  color: #bd3a2e;
}

.dot {
  position: relative;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: #bd3a2e;
}

.dot::before,
.dot::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: inherit;
  animation: ripple 2s ease-out infinite;
}

.dot::after {
  animation-delay: 1s;
}

@keyframes ripple {
  from { scale: 1; opacity: 0.6; }
  to { scale: 3.2; opacity: 0; }
}

@media (prefers-reduced-motion: reduce) {
  .dot::before, .dot::after { animation: none; }
}
```

## 仕組みの解説

波紋の正体は、ドットと同じ形の::beforeと::afterを拡大しながら透明にしていくアニメーションです。2つの擬似要素に1秒差のdelayを付けることで、波が途切れなく続いて見えます（1つだけだと波の間に空白ができます）。background: inheritで親の色を引き継ぐため、色替えは.dotの1箇所で済みます。

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

- [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)
- [opacity](https://www.css-dictionary.com/property/opacity.md)
- [inset](https://www.css-dictionary.com/property/inset.md)
- [border-radius](https://www.css-dictionary.com/property/border-radius.md)