# いいねのポップのCSSアニメーション実装

> ハートを押すと弾んで膨らむ「いいね」アニメーション。checkboxハックとオーバーシュートするイージングが鍵です。

- カテゴリ: マイクロインタラクション
- URL: https://www.css-dictionary.com/animations/heart-pop/

## HTML

```html
<input type="checkbox" id="like" class="like-input">
<label for="like" class="like" aria-label="いいね">❤</label>
```

## CSS

```css
.like-input {
  display: none;
}

.like {
  display: inline-block;
  font-size: 40px;
  color: #cec2a8;
  cursor: pointer;
  transition: color 0.2s, scale 0.15s;
  user-select: none;
}

.like:hover {
  scale: 1.1;
}

.like-input:checked + .like {
  color: #bd3a2e;
  animation: pop 0.45s cubic-bezier(0.175, 0.885, 0.32, 1.4);
}

@keyframes pop {
  0% { scale: 0.6; }
  60% { scale: 1.3; }
  100% { scale: 1; }
}
```

## 仕組みの解説

チェック状態をCSSだけで扱うため、非表示のcheckboxと隣接セレクタ（:checked + .like）を使っています。弾む質感の正体はcubic-bezier(0.175, 0.885, 0.32, 1.4)——第4引数が1を超えると「行き過ぎて戻る」オーバーシュートになります。keyframesでも60%で1.3倍まで膨らませて仕上げの弾みを重ねています。

## 実装のポイント

実務ではbutton要素+aria-pressedで実装し、:checkedの代わりに[aria-pressed="true"]で同じCSSを当てるとよりアクセシブルです。

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

- [animation](https://www.css-dictionary.com/property/animation.md)
- [keyframes](https://www.css-dictionary.com/property/keyframes.md)
- [transition](https://www.css-dictionary.com/property/transition.md)
- [transform](https://www.css-dictionary.com/property/transform.md)
- [user-select](https://www.css-dictionary.com/property/user-select.md)
- [cursor](https://www.css-dictionary.com/property/cursor.md)