CSS Animations & Transitions

CSS Transitions let you smoothly animate property changes over a specified duration. Instead of a value snapping instantly, it gradually interpolates between the old and new values.

.box {
  background: blue;
  transition-property: background;
  transition-duration: 0.5s;
  transition-timing-function: ease;
}
.box:hover {
  background: red;
}

/* Shorthand: */
transition: background 0.5s ease;

Key terminology:

• transition-property — which CSS property to animate (e.g. background, transform, all)
• transition-duration — how long the transition takes (e.g. 0.3s, 500ms)
• transition-timing-function — the acceleration curve (ease, linear, ease-in, ease-out, ease-in-out)
• transition-delay — time to wait before starting (e.g. 0.2s)

Tip: Not all properties can be transitioned. Properties that have discrete values (like display) cannot be smoothly animated. Stick to numeric properties like opacity, transform, color, and width.