リフトホバー — 動きの伝え方辞典

hover

lift hover / card lift

リフトホバー

カードがホバーでふわりと浮き上がる、translateYと影のセット演出。影の質(薄く・大きく・翳りは下方向のみ)で高級にも安っぽくもなる、カードUIの基本語彙。

01 — Demo video

Play live →

02 — Prompt template

カードに lift hover(浮き上がり)を実装してください。

- ホバーで transform: translateY(-{{lift}}px) に、{{duration}}s の ease-out で浮かせる
- 影は薄く大きく: alpha 0.1 前後・blur は浮く距離の3〜4倍・オフセットは下方向のみ(翳りは真下に落とす)
- 影は ::after 擬似要素に box-shadow で事前描画し、opacity 0→1 で切り替える(box-shadow自体をtransitionさせない)
- top や margin ではなく transform で動かす(リフローさせない)
- マウスが離れたら同じ duration で元の位置に戻す
- prefers-reduced-motion 時は浮き上がりを無効化し、状態変化は即時切り替えにする

カードに lift hover(浮き上がり)を実装してください。

- ホバーで transform: translateY(-{{lift}}px) に、{{duration}}s の ease-out で浮かせる
- 影は薄く大きく: alpha 0.1 前後・blur は浮く距離の3〜4倍・オフセットは下方向のみ(翳りは真下に落とす)
- 影は ::after 擬似要素に box-shadow で事前描画し、opacity 0→1 で切り替える(box-shadow自体をtransitionさせない)
- top や margin ではなく transform で動かす(リフローさせない)
- マウスが離れたら同じ duration で元の位置に戻す
- prefers-reduced-motion 時は浮き上がりを無効化し、状態変化は即時切り替えにする

カードに lift hover(浮き上がり)を実装してください。

- ホバーで transform: translateY(-{{lift}}px) に、{{duration}}s の ease-out で浮かせる
- 影は薄く大きく: alpha 0.1 前後・blur は浮く距離の3〜4倍・オフセットは下方向のみ(翳りは真下に落とす)
- 影は ::after 擬似要素に box-shadow で事前描画し、opacity 0→1 で切り替える(box-shadow自体をtransitionさせない)
- top や margin ではなく transform で動かす(リフローさせない)
- マウスが離れたら同じ duration で元の位置に戻す
- prefers-reduced-motion 時は浮き上がりを無効化し、状態変化は即時切り替えにする

03 — Params

lift(浮く距離 px) — 範囲 2〜16 / 初期 8
6〜10pxが上品。16px近くまで上げると軽薄な印象になりやすい。
duration(浮く時間 s) — 範囲 0.2〜0.8 / 初期 0.3
0.25〜0.4sが自然。戻りも同じdurationにすると落ち着いて見える。

04 — Vocab

box-shadow — offset-x / offset-y / blur / spread / 色の順。offset-yだけ正の値にすると翳りが真下に落ち、光源が上に定まる。
shadow alpha — 影の不透明度。0.1前後が上品な目安。0.3を超えると影が主張して重く安っぽくなる。
opacityによる影の切替 — box-shadowのtransitionは毎フレーム影を再描画して重い。擬似要素に影を事前描画しopacityだけ動かすのが定石。
ease-out — 出だしが速く終わりが緩やかなイージング。浮き上がりに使うと「ふわり」と感じられる。

05 — NG → OK examples

言い方: 「「カードをホバーでいい感じに浮かせて」」

なぜNG: box-shadow: 0 4px 8px rgba(0,0,0,0.5) のような濃く小さい影が返ってきがちで、一気に安っぽくなる。box-shadowを直接transitionする描画コストの高い実装も多い。

言い方: 「「lift hoverを実装。translateY(-8px) 0.3s ease-out、影は::afterに 0 24px 48px rgba(0,0,0,0.1) を事前描画してopacityで切替、transformのみでリフロー禁止」」

なぜOK: 浮く距離・速度に加えて影のレシピ(薄く・大きく・下方向のみ)と切り替え方式まで指定。影の質を数値で渡せるかが仕上がりを分ける。