📖 Step 2: Design - UI/UX Basics#57 / 291
Transition
Transition
📖One-line summary
A motion effect that smoothly bridges two states.
✨Example
Elements transition smoothly between states
⚡Vibe coding prompt examples
>_
Implement fade-in/out transitions for page transitions. Make it work in Next.js App Router.
>_
Apply scale and opacity transitions when a modal opens and closes. Open from 0.95 to 1 and close from 1 to 0.95.
>_
Add smooth transitions when list items are added/removed. New items appear with slide-down and removed items fade out.
Try these prompts in your AI coding assistant!