CSS Transitions

What is a CSS Transition?

A CSS Transition lets you gradually change property values (like color, size, position) over time, instead of instantly.

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

button {
  background-color: blue;
  transition: background-color 0.3s ease;
}
button:hover {
  background-color: green;
}

When you hover over the button, the background color fades smoothly from blue to green in 0.3 seconds.