CSS Transition Generator

Most numeric and color properties can be transitioned: opacity, transform, background-color, width, height, padding, margin, border, box-shadow, and filter. Properties like display and visibility can't be smoothly transitioned (though display gained limited support in 2024).

Add transition to the element's default state (not the :hover state): transition: transform 0.2s ease, opacity 0.2s ease. Then change those properties on hover. Keeping transitions on the base state ensures smooth animation both in and out.

ease-out works best for entrances (elements arriving), ease-in for exits (elements leaving), and ease-in-out for state changes. Avoid linear for UI — it feels mechanical. For a more polished feel, use custom cubic-bezier curves like cubic-bezier(0.4, 0, 0.2, 1).

Most UI transitions should be 150–300ms. Under 100ms feels instant (good for micro-interactions like button presses). Over 400ms feels sluggish. Page transitions and complex animations can be 300–500ms. Match duration to the distance/complexity of the change.