Framer Fade Up

DEMO

CODE

<div class="demo-stage ffu-stage"><div class="ffu-item">01</div><div class="ffu-item">02</div><div class="ffu-item">03</div></div>

.ffu-stage { display:flex; gap:1rem; align-items:center; justify-content:center; padding:3rem; background:#0F0F12; min-height:280px; }
.ffu-item { width:80px; height:104px; border-radius:14px; display:flex; align-items:center; justify-content:center; background:#1A1A1A; border:1px solid rgba(255,255,255,.07); color:#E91B89; font-family:'Oswald',sans-serif; font-size:1.4rem; opacity:0; transform:translateY(24px); animation:ffu-up .55s cubic-bezier(.16,1,.3,1) forwards; }
.ffu-item:nth-child(1) { animation-delay:.1s; }
.ffu-item:nth-child(2) { animation-delay:.25s; }
.ffu-item:nth-child(3) { animation-delay:.4s; }
@keyframes ffu-up { to { opacity:1; transform:translateY(0); } }

ライブデモはFramer Motion不要のCSS等価版（animation-delayでstagger）。下がReact + Framer Motionの実装です。

import { motion } from "framer-motion"

const items = ["01", "02", "03"]

export default function FadeUp() {
  return (
    <div className="flex gap-4">
      {items.map((t, i) => (
        <motion.div
          key={t}
          initial={{ opacity: 0, y: 24 }}
          animate={{ opacity: 1, y: 0 }}
          transition={{ duration: 0.5, delay: i * 0.15, ease: [0.16, 1, 0.3, 1] }}
          className="card"
        >
          {t}
        </motion.div>
      ))}
    </div>
  )
}

AI PROMPT

要素がマウント時に下から順にフェードインするエントランスをFramer Motionで作って。各 <motion.div> に initial={{ opacity: 0, y: 24 }}・animate={{ opacity: 1, y: 0 }} を指定し、transition の delay を index * 0.15 にして順番にずらす（stagger）。ease は [0.16, 1, 0.3, 1] で滑らかに。CSSで近似するなら animation-delay を各要素にずらして付ける。LP・カードグリッドの登場演出に。

BOOKS · PR · AMAZON

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

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

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