Color transitions are one of the simplest ways to make a website feel polished. A button that snaps from blue to dark-blue on hover feels robotic. The same button with a 150ms ease transition feels responsive and intentional. But not all color animations are created equal in terms of performance.
What to Animate
Safe to animate with transitions: color, background-color, border-color, outline-color, and box-shadow color. These properties trigger repaint but not layout recalculation, keeping performance acceptable on most devices.
Duration Guidelines
Hover transitions: 120 to 200ms. Fast enough to feel responsive, slow enough to be visible. Page section transitions (scrolling into a dark section): 300 to 500ms. Theme switching (light to dark mode): 200 to 300ms on backgrounds, instantaneous on text (animated text color feels disorienting).
Easing Functions
Use ease or ease-in-out for color transitions. Linear transitions feel mechanical. ease starts fast and decelerates, which matches user expectations for interactive feedback. Avoid ease-in for hover states because the slow start makes the interface feel laggy.
Dark Mode Transitions
When a user toggles dark mode, should colors animate? Opinions differ. Animating backgrounds creates a smooth, premium feel but can cause a flash where text becomes unreadable mid-transition. A common compromise: animate backgrounds but not text, so readability is never compromised during the transition.
transition: color 150ms ease, background-color 150ms ease, border-color 150ms ease; to your base interactive element styles. This single declaration covers most color transition needs across your entire design system.