Blur Fade In

DEMO

<div class="demo-stage bfi-stage">
  <button class="bfi-replay" type="button" onclick="this.closest('.bfi-stage').querySelectorAll('[class*=bfi-i]').forEach(function(el){ el.style.animation='none'; void el.offsetWidth; el.style.animation=''; });">REPLAY ▶</button>
  <p class="bfi-eyebrow bfi-i1">MOTION LAB</p>
  <h3 class="bfi-title bfi-i2">BLUR FADE IN</h3>
  <p class="bfi-lead bfi-i3">ぼけた状態から焦点が合うように立ち上がります。</p>
  <span class="bfi-cta bfi-i4">GET STARTED</span>
</div>

.bfi-stage { position:relative; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:.9rem; padding:3rem 1.5rem; background:#0B0B10; min-height:280px; text-align:center; }
.bfi-replay {
  position:absolute; top:1rem; right:1rem;
  padding:.35rem 1rem; border:1px solid rgba(255,255,255,.22); border-radius:999px;
  background:transparent; color:#9A9AA5; cursor:pointer;
  font-family:'Oswald',sans-serif; font-size:.62rem; letter-spacing:.2em;
}
.bfi-replay:hover { color:#E91B89; border-color:#E91B89; }
.bfi-eyebrow { font-family:'Oswald',sans-serif; font-size:.7rem; letter-spacing:.34em; color:#E91B89; }
.bfi-title { font-family:'Oswald',sans-serif; font-size:clamp(1.6rem,7vw,2.8rem); letter-spacing:.1em; color:#fff; }
.bfi-lead { font-size:.86rem; line-height:1.8; color:#9A9AA5; max-width:340px; }
.bfi-cta { margin-top:.6rem; padding:.7rem 1.8rem; border-radius:999px; background:#E91B89; color:#fff; font-family:'Oswald',sans-serif; font-size:.72rem; letter-spacing:.2em; }
.bfi-i1, .bfi-i2, .bfi-i3, .bfi-i4 {
  opacity:0; filter:blur(12px); transform:translateY(18px);
}
.bfi-i1 { animation: bfi-in .85s cubic-bezier(.22,1,.36,1) .05s forwards; }
.bfi-i2 { animation: bfi-in .85s cubic-bezier(.22,1,.36,1) .2s forwards; }
.bfi-i3 { animation: bfi-in .85s cubic-bezier(.22,1,.36,1) .35s forwards; }
.bfi-i4 { animation: bfi-in .85s cubic-bezier(.22,1,.36,1) .5s forwards; }
@keyframes bfi-in {
  from { opacity:0; filter:blur(12px); transform:translateY(18px); }
  to   { opacity:1; filter:blur(0); transform:translateY(0); }
}
@media (prefers-reduced-motion: reduce) {
  .bfi-i1, .bfi-i2, .bfi-i3, .bfi-i4 { animation:none; opacity:1; filter:none; transform:none; }
}

AI PROMPT

ぼけた状態から焦点が合うように現れる出現アニメーションを作って。要素の初期状態を opacity: 0; filter: blur(12px); transform: translateY(18px) にし、@keyframes で opacity: 1; filter: blur(0); transform: translateY(0) まで持っていく。animation-fill-mode: forwards を必ず付ける（付けないと再生後に初期状態へ戻る）。イージングは cubic-bezier(.22, 1, .36, 1) のような終盤が緩やかなものにすると、焦点が合う感じが出る。duration は 0.8〜0.9s とやや長めが合う。ヒーローの見出し・リード文・CTAなど複数要素に順番に掛けるときは、animation-delay を 0.05s / 0.2s / 0.35s / 0.5s と 0.15s 刻みでずらす。注意: filter: blur() は要素を別レイヤーで合成するため、大量の要素に一度に掛けないこと。ファーストビューの4〜6要素程度に留め、それ以降はスクロール連動で個別に発火させる。

Acceptance criteria: works with prefers-reduced-motion (animation disabled), zero console errors, zero layout shift

AIエージェントでの実装ガイド → Claude Code でWebアニメーションを実装する

BOOKS · PR · AMAZON

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

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

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