Transitions

What you'll learn

How to animate the change between two states of an element using transition, plus the :hover and :focus states that trigger it.

Why it matters

Instant jumps feel harsh. A short, smooth change helps people notice that something responded to them, and makes an interface feel polished.

Explanation

A transition tells the browser to animate between an old value and a new value instead of jumping. You set it on the element's normal state:

transition takes up to four values: the property to animate (or all), the duration (0.3s), a timing function (ease, linear, ease-in-out) and an optional delay.

Pseudo-classes such as :hover (mouse over), :focus (keyboard focus) and :active (while pressed) describe states that trigger the change.

Properties like transform and opacity animate smoothly and cheaply. For example transform: scale(1.1) grows an element and translateY(-4px) lifts it.

Example

Step-by-step walkthrough

1. The normal state has a blue background and a transition listing two properties with their durations.
2. When you hover, .btn:hover sets a new background and moves the button up 4px.
3. Because of the transition, both changes slide over 0.3s and 0.2s instead of snapping.
4. When the mouse leaves, the button animates back to its normal state.
5. :focus-visible shows an outline for keyboard users only.

Try it yourself

Change the duration to 1s to see the effect clearly. Then add transform: scale(1.1) to the hover state.

Hover transitionHTML / CSS

Editable code<style> .btn { background: royalblue; color: white; border: none; padding: 12px 24px; border-radius: 8px; cursor: pointer; transition: background 0.3s ease, transform 0.2s ease; } .btn:hover { background: tomato; transform: translateY(-4px); } </style> <button class="btn">Hover or tab to me</button>

Run ResetCopyCtrl+Enter to run

Common mistakes

• Putting transition only on :hover, so the change animates in but snaps back out. Put it on the normal state.
• Animating width or top on large pages, which can be slow. Prefer transform and opacity.
• Very long durations. Under half a second feels responsive.
• Hover-only interactions. Touch screens have no hover, so do not hide essential features behind it.

Quick quiz

Summary

• transition: property duration timing smooths a change.
• Trigger it with states such as :hover and :focus.
• Prefer animating transform and opacity, and respect reduced motion.

Next: placing elements exactly where you want them.

button {
  background: royalblue;
  transition: background 0.3s ease;
}
button:hover {
  background: tomato;
}

<style>
  .btn {
    background: royalblue;
    color: white;
    border: none;
    padding: 12px 24px;
    border-radius: 8px;
    cursor: pointer;
    transition: background 0.3s ease, transform 0.2s ease;
  }
  .btn:hover {
    background: tomato;
    transform: translateY(-4px);
  }
  .btn:focus-visible {
    outline: 3px solid gold;
  }
</style>

<button class="btn">Hover or tab to me</button>