# カードのリフト（浮き上がり）のCSSアニメーション実装

> ホバーでカードがふわっと浮き上がる定番エフェクト。translateと二段構えの影で自然な浮遊感を作ります。

- カテゴリ: ホバー
- URL: https://www.css-dictionary.com/animations/hover-lift/

## HTML

```html
<div class="card">
  <strong>ホバーしてみて</strong>
  <p>ふわっと浮き上がります</p>
</div>
```

## CSS

```css
.card {
  width: 220px;
  padding: 20px;
  background: #fff;
  border: 1px solid #e2d8c2;
  border-radius: 10px;
  box-shadow: 0 1px 2px rgb(0 0 0 / 0.06);
  transition: translate 0.25s ease, box-shadow 0.25s ease;
}

.card:hover {
  translate: 0 -6px;
  box-shadow:
    0 2px 4px rgb(0 0 0 / 0.05),
    0 16px 32px -12px rgb(0 0 0 / 0.2);
}

.card p {
  margin: 6px 0 0;
  color: #7d7159;
  font-size: 14px;
}
```

## 仕組みの解説

位置の移動にはmarginやtopではなく個別変形プロパティのtranslateを使います（レイアウトを再計算させず、GPUで合成されるため滑らか）。影は「小さく濃い影+大きく薄い影」の二段重ねにすると、単発の影より自然な奥行きが出ます。transitionの対象をtranslateとbox-shadowに限定しているのは、allにして意図しないプロパティまで動かさないためです。

## 実装のポイント

タッチデバイスではホバーが貼り付くため、実務では@media (hover: hover)でガードすると安全です。

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

- [transition](https://www.css-dictionary.com/property/transition.md)
- [transform](https://www.css-dictionary.com/property/transform.md)
- [box-shadow](https://www.css-dictionary.com/property/box-shadow.md)
- [pseudo-hover](https://www.css-dictionary.com/property/pseudo-hover.md)