Blur In
ブラーイン
どんな動き？
要素がぼかされた状態から、徐々に鮮明になりながらフェードインするアニメーション。写真のピントが合っていく様子に似た演出で、じわっとした柔らかい登場感を演出できる。ヒーロー画像や背景、印象的に見せたい見出しなどに使うと効果的。
よく使う場所
ヒーロー画像背景見出しアイキャッチ
日本語での表現例
こんな言葉で説明される動きです。
AIへの指示文（プロンプト）
ChatGPTやClaudeなどの生成AIに、このままコピーして渡せます。「詳細版」を使うと実装結果が安定しやすくなります。
Fade in the element while transitioning from blurred to sharp focus.Trigger:
When the element enters the viewport (Intersection Observer).
Initial state:
opacity: 0
filter: blur(20px)
Animation:
Sharpen from blur to focus while fading in.
Final state:
opacity: 1
filter: blur(0)
Timing:
duration: 0.7s
easing: ease-out
Play only once.実装方法の候補
この動きは以下の技術で実装できます。
CSSIntersection ObserverGSAP
別名・関連ワード
Blur Fade InFocus In