What is a transition?

Learn the basics of the transition property.

What is a transition?

A transition lets a CSS property value change smoothly. For example, a button's color shifts gradually on hover instead of jumping at once.

The transition is a short animation where the browser computes the in-between values between two states. You only write the transition declaration; you do not define keyframes. The result feels fluid and professional.

What is a state change?

For a transition to run, a state change is required. The most common triggers are :hover (pointer over the element), :focus (element gains focus), :active (the click moment) and :checked (a ticked checkbox).

Beyond these, @media queries and adding a class with JavaScript also count as state changes. On every change, the transition smoothly updates the properties you named.

A button hover effect

You designed a button whose background turns blue on hover. Without a transition the color jumps instantly; the user feels a blink. Add transition: background-color 0.3s and the color flows over 0.3 seconds.

Smooth changes give the interface its feel. Almost every hover and focus effect on a modern site carries a transition.

Exercise Add a hover transition to the button

Add transition: background-color 0.3s to the .btn rule. Then set background-color: navy for .btn:hover. On hover the color should flow smoothly from blue to navy.

Show example solution

.btn {
  background-color: #2563eb;
  color: #ffffff;
  transition: background-color 0.3s;
}

.btn:hover {
  background-color: navy;
}

Test yourself

Which scenario calls for a transition?
```
/* smooth color change on hover */
.btn { transition: background-color 0.3s; }
```
- Equalizing table cell widths
- A button color shifting smoothly on hover
- Speeding up page load time
- Compressing a font file
Show answer

A button color shifting smoothly on hover — Correct. Hover is a state change; the transition eases the color shift.

Write the transition declaration

.btn {
  ____: background-color 0.3s;
}

Show answer

.btn {
  transition: background-color 0.3s;
}

Match each state selector to its trigger

:hover

When the pointer enters the element
:focus

When the element gains focus
:active

At the moment of click
:checked

When a checkbox is ticked

Next lesson: Transition-property

We Are Enhancing Your Experience

Cookie Preferences

Strictly Necessary Cookies

Analytical Cookies