CSS Transitions

Transition Properties

transition-property specifies which CSS properties to animate.

transition-duration sets animation length in seconds or milliseconds.

transition-timing-function controls animation speed curve.

transition-delay adds a delay before animation starts.

Shorthand: transition: property duration timing-function delay;

/* Basic transition */
.button {
  background-color: blue;
  transition: background-color 0.3s ease;
}

.button:hover {
  background-color: darkblue;
}

/* Multiple properties */
.card {
  transform: scale(1);
  opacity: 1;
  transition: all 0.3s ease-in-out;
}

.card:hover {
  transform: scale(1.05);
  opacity: 0.9;
}