CSS transition

A CSS transition smoothly animates a change to a property, from one value to another, over a set duration instead of switching instantly. It is the simplest way to add motion to an interface, most often on a state change like a hover, focus or class toggle.

The four transition properties

A transition is controlled by four settings, usually written together in the transition shorthand, for example transition: background-color 200ms ease-in-out 0s;.

What you can transition

Only animatable properties transition. Colours, opacity, transform, dimensions and positions all work; discrete properties like display do not (though modern CSS is adding support). Transitioning transform and opacity is the smoothest because the browser can offload them to the GPU.

Transition versus animation

A transition animates a single change between two states and needs a trigger, like a hover. A CSS animation uses keyframes, can define many steps, and can run on its own or loop. Use a transition for simple hover and focus effects, and an animation for multi-step or automatic motion.

Timing functions

The timing function shapes how the change accelerates. ease starts and ends softly, linear is constant, and a custom cubic-bezier() gives full control. Keep durations short, around 150 to 300 milliseconds, so the interface feels responsive rather than sluggish.

Best practices

Name the exact properties instead of using transition: all, which can animate unintended changes and hurt performance. Pair transitions with a clear hover or focus state, and respect prefers-reduced-motion for users who are sensitive to movement.

CSS transitions at BeBranded

At BeBranded we use transitions for crisp, subtle feedback on buttons, links and cards, so an interface feels alive without distracting. It is part of the polished, performant front-end we deliver through our design work.