Transition

CSS Transition Summary

A CSS transition makes a style change happen smoothly instead of instantly. Transitions are commonly used with hover, focus, and other user actions.

.button {
	background: blue;
	transition: background 0.3s;
}

.button:hover {
	background: black;
}

What Transitions Do

Without a transition, a hover style changes immediately. With a transition, the browser animates from the first style to the second style.

This is often used to make buttons, links, cards, menus, and form inputs feel smoother when a user interacts with them.

Transition Property

The first part tells CSS which property should transition. This might be background, color, opacity, border, or transform.

transition: background 0.3s;

Transition Time

The time tells CSS how long the change should take. Short transitions often feel quick and clean.

transition: color 0.2s;

Multiple Transitions

You can transition more than one property by separating them with commas.

transition: background 0.3s, color 0.3s;

Common Uses

Transitions are often used on simple hover changes. They should usually be simple, fast, and easy to notice without slowing the page down.