CSS and UI animation patterns for responsive, polished interfaces. Use when implementing hover effects, tooltips, button feedback, transitions, or fixing animation issues like flicker and shakiness.
"box"
"box-inner"
</ div
</ div
.box :hover .box-inner { transform : translateY (- 20% ); } .box-inner { transition : transform 200ms ease; } The parent's hover area stays stable while the child moves. Disable Hover on Touch Devices Touch devices don't have true hover. Accidental finger movement triggers unwanted hover states. @media ( hover : hover ) and ( pointer : fine) { .card :hover { transform : scale ( 1.05 ); } } Note: Tailwind v4's hover: class automatically applies only when the device supports hover. Touch & Accessibility Ensure Appropriate Target Areas Small buttons are hard to tap. Use a pseudo-element to create larger hit areas without changing layout. Minimum target: 44px (Apple and WCAG recommendation) @utility touch-hitbox { position : relative; } @utility touch-hitbox ::before { content : "" ; position : absolute; display : block; top : 50% ; left : 50% ; transform : translate (- 50% , - 50% ); width : 100% ; height : 100% ; min-height : 44px ; min-width : 44px ; z-index : 9999 ; } Usage: <button className= "touch-hitbox"
< BellIcon /> </button> Easing Selection Use ease-out for Enter/Exit Elements entering or exiting should use ease-out . The fast start creates responsiveness. .dropdown { transition : transform 200ms ease-out, opacity 200ms ease-out; } ease-in starts slow—wrong for UI. Same duration feels slower because the movement is back-loaded. Use ease-in-out for On-Screen Movement Elements already visible that need to move should use ease-in-out . Mimics natural acceleration/deceleration like a car. .slider-handle { transition : transform 250ms ease-in-out; } Use Custom Easing Curves Built-in CSS curves are usually too weak. Custom curves create more intentional motion. Resources: easings.co Visual Tricks Use Blur as a Fallback When easing and timing adjustments don't solve the problem, add subtle blur to mask imperfections. .button-transition { transition : transform 150ms ease-out, filter 150ms ease-out; } .button-transition :active { transform : scale ( 0.97 ); filter : blur ( 2px ); } Blur bridges visual gaps between states, tricking the eye into seeing smoother transitions. The two states blend instead of appearing as distinct objects. Performance note: Keep blur under 20px, especially on Safari. Why Details Matter "All those unseen details combine to produce something that's just stunning, like a thousand barely audible voices all singing in tune." — Paul Graham, Hackers and Painters Details that go unnoticed are good—users complete tasks without friction. Great interfaces enable users to achieve goals with ease, not to admire animations.