CSS Transition Summary

A CSS transition animates the change from one property value to another over a short amount of time.

button {
	transition: background 200ms ease;
}

button:hover {
	background: navy;
}

Without the transition, the background changes instantly. With the transition, the change feels smoother.

A Transition Needs A Property And Duration

The property says what should animate. The duration says how long the change should take.

.card {
	transition: transform 200ms;
}

Durations are often written in milliseconds, such as 200ms, or seconds, such as 0.2s.

The timing function controls how the speed changes during the transition. ease is a common default.

.card {
	transition: transform 200ms ease;
}

Transitions often animate state changes such as hover and focus.

.card {
	transition: transform 200ms ease;
}

.card:hover,
.card:focus {
	transform: translateY(-4px);
}

The Transform lesson explains the visual movement used in this example.