CSS transition Property

What You’ll Learn

The transition property lets you animate CSS changes smoothly over time — perfect for hover effects, focus states, and polished UI feedback without JavaScript.

Introduction

The transition property in CSS allows you to change property values smoothly over a given duration. It is commonly used to create animations and enhance user interactions by animating the changes of CSS properties. This makes your web pages more dynamic and engaging.

Definition and Usage

Use transition on the base state of an element (not only on :hover) so the browser knows how to animate both directions — when the state changes in and when it changes back.

📝 Syntax

The transition property is a shorthand for four individual transition properties:

• transition-property — which CSS property to animate
• transition-duration — how long the animation takes
• transition-timing-function — the speed curve
• transition-delay — wait time before the transition starts

element {
  transition: property duration timing-function delay;
}

Basic Example

button {
  transition: background-color 0.5s ease;
}

button:hover {
  background-color: red;
}

Syntax Rules

• Duration must use time units such as s or ms.
• Only the first value after the property name is required to be a duration when using shorthand.
• You can list multiple transitions separated by commas.
• Set transition on the default state, not only on :hover.
• The property is not inherited.

Related Properties

• transition-property — choose which properties animate
• transition-duration — set animation length
• transition-timing-function — control acceleration curve
• transition-delay — delay the start of the transition
• animation — keyframe-based motion on a timeline

🎯 Default Value

The default value of the transition property is none 0s ease 0s, which means no transition effect will be applied unless specified.

💎 Property Values

The shorthand combines four parts. Each part maps to a longhand property.

When to Use transition

transition is ideal when a property changes because of user interaction or a class toggle:

• Button hover states — Smooth color, shadow, or scale changes on hover and focus.
• Card interactions — Lift cards with transform instead of animating layout properties.
• Menu reveals — Fade or slide panels open with opacity and transform.
• Form focus feedback — Highlight borders and backgrounds when inputs are focused.

Examples Gallery

In this example, we’ll change the background color of a button with a smooth transition over 0.5 seconds.

<style>
  button {
    background-color: blue;
    color: white;
    padding: 10px 20px;
    border: none;
    cursor: pointer;
    transition: background-color 0.5s ease;
  }
  button:hover {
    background-color: red;
  }
</style>

<button>Hover over me!</button>

.card {
  width: 160px;
  height: 100px;
  transition: width 0.4s ease, height 0.4s ease, box-shadow 0.4s ease;
}

.card:hover {
  width: 200px;
  height: 120px;
  box-shadow: 0 8px 24px rgba(37, 99, 235, 0.25);
}

.ease .bar { transition: transform 1.2s ease; }
.linear .bar { transition: transform 1.2s linear; }
.ease-in-out .bar { transition: transform 1.2s ease-in-out; }

.demo:hover .bar { transform: translateX(120px); }

.card {
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}

.card:hover {
  transform: translateY(-6px) scale(1.03);
  box-shadow: 0 12px 28px rgba(15, 23, 42, 0.12);
}

♿ Accessibility

• Reduced motion — Wrap or shorten transitions when prefers-reduced-motion: reduce is set.
• Do not rely on motion alone — Ensure state changes are visible without animation (color, outline, text).
• Focus states — Apply transitions to :focus-visible so keyboard users get the same polish.
• Avoid long delays — Delays on essential UI feedback can confuse users who expect instant response.

transition + transform

For hover lifts, scales, and slides, pair transition with transform instead of animating layout properties like top or width when possible.

.card {
  transition: transform 0.2s ease;
}
.card:hover {
  transform: scale(1.05);
}

💡 Best Practices