What Are CSS Transitions?

CSS Transitions let you smoothly animate changes in CSS properties. Instead of instantly changing color, size, or position, transitions give you a clean fade or movement.

The Basic Syntax

.selector {
  transition: property duration timing-function delay;
}
      

button {
  background-color: #64b5f6;
  transition: background-color 0.3s ease;
}

button:hover {
  background-color: #90caf9;
}
      

Common Properties You Can Animate

• color
• background-color
• width / height
• opacity
• transform
• margin / padding

Transition Timing Functions

Controls the speed curve:

• ease – default smooth curve
• linear – constant speed
• ease-in – slow → fast
• ease-out – fast → slow
• ease-in-out – slow → fast → slow

Animating Multiple Properties

.box {
  transition: width 0.3s, height 0.3s, opacity 0.3s;
}
      

Using All Properties

.box {
  transition: all 0.5s ease-in-out;
}
      

Hover Example

.card {
  padding: 20px;
  background: #1e1e1e;
  transition: transform 0.3s ease;
}

.card:hover {
  transform: translateY(-6px);
}
      

Delays

button {
  transition: background-color 0.4s ease 0.2s; /* 0.2s delay */
}
      

What's Next?

Now that you understand CSS Transitions, you’re ready to combine them with CSS Animations, transforms, and interactive UI components.