CSS Transition Generator

A transition smoothly interpolates an element between two states when something changes — hover, click, focus — and only ever plays once per trigger. A CSS animation uses @keyframes and can run automatically, loop, and have multiple steps in between. If you want motion that plays on its own or repeats, use the CSS Animation Generator instead.

Most numeric and color properties can be transitioned, including opacity, transform (translate, scale, rotate, skew), background-color, border-radius and box-shadow. Properties like display can't be smoothly transitioned since they don't have intermediate values.

Yes — switch the Trigger to Active to fire on click/press, or Focus to fire on click or keyboard tab. There's also a manual Toggle button in the preview so you can inspect the effect anytime, which is especially useful on touch devices where :hover isn't reliable.