Transition

A CSS property that enables smooth changes between property values over a specified duration, creating simple animations.

Overview

CSS transitions provide a way to control animation speed when changing CSS properties. Instead of having property changes take effect immediately, you can cause the changes to take place over a period of time, creating smooth visual effects for hover states, focus, and other interactions.

Example

css
.button {
  background-color: blue;
  transition: background-color 0.3s ease;
}

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

/* Multiple properties */
.box {
  transition: all 0.3s ease-in-out;
}

/* Specific properties with different durations */
.card {
  transition:
    transform 0.3s ease,
    box-shadow 0.2s ease-out;
}

Key Points

  • Smoothly animates property changes
  • Requires a trigger (hover, focus, class change)
  • Four properties: property, duration, timing-function, delay
  • Common timing functions: ease, linear, ease-in, ease-out
  • Not all CSS properties are animatable

Learn More