Drop in
Reload or open the page to see the notice card animate from slightly above with opacity fade.
New comment
Jordan left feedback on your PR — review the diff before merge.
Widely Supported
Quick implementation
@keyframes drop-in-appear {
from { opacity: 0; transform: translateY(-14px); }
to { opacity: 1; transform: translateY(0); }
}
.drop-in-card {
animation: drop-in-appear 0.55s cubic-bezier(0.22, 1, 0.36, 1) both;
}Prompt this to your LLM
Staggered lists and view transitions.
You are implementing a drop-in entrance for toast or inline alerts.
Goal: translateY from -12px to 0 with opacity 0→1, ~0.5s, ease-out.
Constraints:
- Respect prefers-reduced-motion: skip animation.
- Use animation-fill-mode: both so the first frame applies before paint.
Return CSS.Why this matters in 2026
Entrance cues help users notice new content without jarring motion; a short vertical offset reads as “arriving” on screen.
The logic
Combining translate and opacity in one keyframe keeps the GPU happy — one composited animation.
Accessibility & performance
Always pair motion with a reduced-motion path; avoid animating layout properties.