CSS transition Property

Definition and Usage

The transition property is a shorthand for transition-property, transition-duration, transition-timing-function, and transition-delay (plus the newer transition-behavior).

It smooths the change when a property value updates — for example on :hover, :focus, or a class toggle. It is not inherited.

CSS Syntax

One or more single transitions, comma-separated. Example: background-color 0.3s ease 0.1s.

Property Values

How to Use transition

Define the transition on the resting state, then change values on the target state.

1. Pick an animatable property (opacity, transform, background-color, …).
2. Set transition on the base rule (not only on :hover).
3. Change the property on :hover, :focus-visible, or a class.
4. Prefer short durations (about 150ms–400ms) for UI feedback.

Live Preview

Choose a transition value, then press Toggle (works with keyboard). Watch color and position ease.

CSS Examples

Put transition on the base rule so both enter and leave animate. Use Try It Yourself for a live editor.

<style>
  .btn {
    background: #2563eb;
    color: #fff;
    transition: background-color 0.4s ease;
  }
  .btn:hover,
  .btn:focus-visible {
    background: #dc2626;
  }
</style>

<button class="btn" type="button">Hover me</button>

<style>
  .btn {
    background: #2563eb;
    color: #fff;
    transition: background-color 0.6s ease-in-out 0.25s;
  }
  .btn:hover,
  .btn:focus-visible {
    background: #16a34a;
  }
</style>

<button class="btn" type="button">Wait, then fade</button>

<style>
  .card {
    background: #2563eb;
    color: #fff;
    transition:
      background-color 0.35s ease,
      transform 0.35s ease;
  }
  .card:hover,
  .card:focus-visible {
    background: #7c3aed;
    transform: translateY(-6px);
  }
</style>

<button class="card" type="button">Lift me</button>

Key Takeaways