Framer Spring Hover

DEMO

CODE

<div class="demo-stage fsh-stage"><div class="fsh-card">HOVER ME</div></div>

.fsh-stage { display:flex; align-items:center; justify-content:center; padding:3rem; background:#0F0F12; min-height:280px; }
.fsh-card { width:160px; height:160px; border-radius:22px; display:flex; align-items:center; justify-content:center; background:#1A1A1A; border:1px solid rgba(233,27,137,.4); color:#fff; font-family:'Oswald',sans-serif; letter-spacing:.12em; cursor:pointer; transition:transform .45s cubic-bezier(.34,1.56,.64,1); }
.fsh-card:hover { transform:scale(1.12) rotate(-2deg); }

ライブデモはFramer Motion不要のCSS等価版（バネ感はcubic-bezier(.34,1.56,.64,1)で近似）。下がReact + Framer Motionの実装です。

import { motion } from "framer-motion"

export default function SpringCard() {
  return (
    <motion.div
      whileHover={{ scale: 1.12, rotate: -2 }}
      transition={{ type: "spring", stiffness: 300, damping: 15 }}
      className="card"
    >
      HOVER ME
    </motion.div>
  )
}

AI PROMPT

ホバーでバネのように弾んで拡大するカードをFramer Motionで作って。<motion.div> に whileHover={{ scale: 1.12, rotate: -2 }} と transition={{ type: 'spring', stiffness: 300, damping: 15 }} を指定するだけ。springタイプにすることで行き過ぎて戻る弾性が出る。CSSで近似する場合は transition の easing に cubic-bezier(.34,1.56,.64,1)（オーバーシュート）を使う。ボタン・カードの手触り向上に。

BOOKS · PR · AMAZON

※当サイトはAmazonアソシエイトプログラムの参加者です。リンクから商品をご購入いただくと、当方に紹介料が発生します。

学びを止めない · AMAZONサブスク

※当サイトはAmazonアソシエイトプログラムの参加者です。リンクから商品をご購入いただくと、当方に紹介料が発生します。