Duration: 150-300ms for most UI transitions. Under 100ms feels instant. Over 500ms feels slow. Easing: ease-out for entrances, ease-in for exits, ease-in-out fo
Micro Animations define precise timing and easing guidelines for subtle UI transitions, typically lasting between 150 and 300 milliseconds. They provide visual feedback, indicate state changes, and guide user attention without overwhelming the interface. By applying recommended easing curves like ease-out for entrances and ease-in for exits, these animations feel natural and responsive, avoiding robotic or slow perceptions. The skill emphasizes restraint, animating only what is necessary to maintain clarity and focus.
This skill is ideal for performance marketers and growth leads aiming to optimize conversion rates through improved user experience on landing pages and product interfaces. It also serves agency strategists designing interactive elements such as call-to-action buttons, dropdowns, and modals that require polished, responsive feedback. SEO and PPC operators working with front-end teams can leverage these micro-animations to reduce bounce rates by subtly enhancing perceived speed and interactivity.
Practitioners typically start by defining animation durations aligned with the interaction type—hover effects around 100-150ms, modals opening between 200-250ms, and page transitions stretching to 300ms. Next, they apply appropriate easing functions to entrances, exits, or state changes to ensure smooth perception and avoid linear or overly mechanical motion. Then, they implement essential micro-interactions like button feedback states, dropdown fade-ins with slight vertical movement, or accordion expansions using height animations with CSS grid rows. Finally, they test performance on real devices, ensuring animations respect user preferences such as reduced motion settings and do not interfere with accessibility.
How long should most UI animations last? Generally between 150 and 300 milliseconds to feel responsive without sluggishness. Can I use linear easing for micro-animations? No, linear easing feels robotic and should be avoided; use ease-out, ease-in, or ease-in-out instead. What’s the best way to handle user preferences for reduced motion? Always detect and respect the prefers-reduced-motion setting by disabling or minimizing animation durations.
Attach the Micro Animations skill to any Metaflow agent tasked with UI or front-end optimization workflows focused on conversion rate improvements. Expect the agent to guide you through timing and easing best practices, recommend specific animation patterns, and help assess trade-offs between responsiveness and visual feedback. This skill supports iterative refinement of interactive elements to enhance clarity and user engagement while respecting accessibility standards. You can start by...
For broader context, see our roundup of claude skills for marketing, and read Claude Code workflows for marketing agencies for related setup guidance.