Blur in
Content resolves from a soft blur to sharp, with a slight scale settle. Feels like a camera focusing.
CSSBeginner
<h1>Come into focus</h1>h1{font-size:clamp(2.2rem,9vw,4.5rem);margin:0;letter-spacing:-.03em;
animation:focus 1.2s cubic-bezier(.2,.8,.2,1) both}
@keyframes focus{
from{opacity:0;filter:blur(18px);transform:scale(1.08)}
to{opacity:1;filter:blur(0);transform:none}
}
@media (prefers-reduced-motion:reduce){h1{animation:none}}<!doctype html>
<html lang="en"><head><meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1"><title>Blur in</title>
<style>
*{box-sizing:border-box}
html,body{margin:0;height:100%}
body{display:grid;place-items:center;background:#140807;color:#fffffc;font:16px/1.5 system-ui,-apple-system,"Segoe UI",sans-serif}
h1{font-size:clamp(2.2rem,9vw,4.5rem);margin:0;letter-spacing:-.03em;
animation:focus 1.2s cubic-bezier(.2,.8,.2,1) both}
@keyframes focus{
from{opacity:0;filter:blur(18px);transform:scale(1.08)}
to{opacity:1;filter:blur(0);transform:none}
}
@media (prefers-reduced-motion:reduce){h1{animation:none}}
</style></head>
<body><h1>Come into focus</h1></body></html>Good for
Hero headings and large images where you want a premium, cinematic arrival.
Watch out for
filter blur is heavy on big areas. Keep it to short animations and avoid blurring huge photos on low-end phones.
Accessibility
Wrap motion in @media (prefers-reduced-motion: reduce) and switch it off or shorten it for people who ask for less movement.