Enter with fade, rise, blur
Enter with opacity, an 8px rise and a 4px blur that resolves to sharp.
From design-motion-principles, Jakub Krehel’s enter recipe.
Which one materializes?
Type a message and press Send.
Opacity onlyFades
Invoice #1042 was paid
opacity 0→1+ translateYSlides
Invoice #1042 was paid
opacity 0→1translateY 8px→0+ blurMaterializes
Invoice #1042 was paid
opacity 0→1translateY 8px→0blur 4px→0@keyframes enter { from { opacity: 0; transform: translateY(8px); filter: blur(4px); } }
.toast { animation: enter 300ms var(--ease-out) both; }Find the sweet spot
Drag a slider; the card replays on release.
Bank feed synced
Blur moves focus
Open the dialog with and without background blur.
Bills due Friday
- Northwind Hosting$1,920.00
- Harbor Legal LLP$1,610.00
- Pinecrest Office Supply$750.00
Approve 3 bills?
$4,280.00 leaves Operating on Friday.
filter: blur(3px)opacity: .6.page[data-behind] { filter: blur(3px); opacity: .6; }Why it matters, pros and cons
Why it matters
A rise gives direction; blur resolving to sharp reads as focusing.
Pros
- Feels more physical than a plain fade.
- Blur hides sub-pixel jitter on short rises.
- One recipe for toasts, popovers, dialogs.
Cons
- On every component it reads as a template.
- Blur repaints each frame; avoid large surfaces.
- Frequent UI like menus should just appear.