Entrances & Exits · Entering & leaving
Blur-up image load图片模糊聚拢
- colour first
- settling inward
- no bare edges
The image starts as a blurred block of colour, slightly enlarged, then sharpens while settling back. It goes from “you can read the palette at a glance” to “you can see the detail”, and because it settles inward the edges never show bare space.
When to use it
Use it for large photos, product shots, and article covers. Skip it for small icons and local images that appear instantly — the extra 700ms only reads as slow.
Parameters
filter: blur(18px) → blur(0) · transform: scale 1.08 → 1 · 700ms cubic-bezier(.22,1,.36,1) · placeholder fades out in step
Recipe
Blur-up image load → filter blur(18px) → blur(0) @ 700ms cubic-bezier(.22,1,.36,1)Blur-up image load → scale 1.08 → 1 @ 700ms
One sentence for your AI
Make this image load blurry-then-sharp: put a small same-hue placeholder underneath, and once the real image has decoded take filter from blur(18px) to 0 and scale from 1.08 to 1 over 700ms cubic-bezier(.22,1,.36,1), fading the placeholder out in step. Settle inward so the edges never show bare space.