CSS Transitions

Animate property changes smoothly using transition with duration, timing function, and delay.

Overview

CSS transitions create smooth animations when a CSS property changes value for example, when a user hovers over a button and its color changes gradually instead of instantly. The `transition` property specifies: 1. **Property** which property to animate (or `all`) 2. **Duration** how long the animation takes (e.g., `0.3s`) 3. **Timing function** acceleration curve (`ease`, `linear`, `ease-in`, `ease-out`, `ease-in-out`) 4. **Delay** how long to wait before starting (e.g., `0.1s`) You set transition on the element's base state, not on the hover/active state. This ensures the animation plays in both directions on hover in, and on hover out. Transitions only work between two defined states. For more complex multi-step animations, use CSS animations (keyframes).

Key Points

•Set transition on the base element, not the :hover state
•transition: property duration timing-function delay
•transition: all 0.3s ease animates ALL changing properties
•Transitioning specific properties is better for performance: "background-color 0.2s ease"
•ease, ease-in, ease-out, ease-in-out, linear the five standard easing functions
•Not all properties can be transitioned (e.g., display cannot)

Examples

Basic button hover transition

.btn {
  background: #2563eb;
  color: white;
  padding: 8px 16px;
  border-radius: 6px;
  border: none;
  cursor: pointer;

  /* Define the transition on the base state */
  transition: background-color 0.2s ease;
}

.btn:hover {
  background: #1d4ed8;  /* This change will be animated */
}

The transition plays when hovering over (base → hover) and when leaving (hover → base).

Transitioning multiple properties

.card {
  background: white;
  box-shadow: 0 1px 3px rgba(0,0,0,0.1);
  transform: translateY(0);

  /* Multiple transitions */
  transition: box-shadow 0.3s ease,
              transform 0.3s ease;
}

.card:hover {
  box-shadow: 0 8px 24px rgba(0,0,0,0.15);
  transform: translateY(-4px);   /* subtle lift effect */
}

Common easing functions

/* ease: slow start, fast middle, slow end (default) */
.ease         { transition: opacity 0.3s ease; }

/* linear: constant speed */
.linear       { transition: opacity 0.3s linear; }

/* ease-in: starts slow, ends fast */
.ease-in      { transition: opacity 0.3s ease-in; }

/* ease-out: starts fast, ends slow (best for elements leaving) */
.ease-out     { transition: opacity 0.3s ease-out; }

/* ease-in-out: slow start and end (best for moving elements) */
.ease-in-out  { transition: opacity 0.3s ease-in-out; }

Common Mistakes

Putting transition on :hover instead of the base state it only animates one direction
Using transition: all when only one property changes wastes browser resources
Transitioning between display: none and display: block display cannot be transitioned; use opacity and visibility instead

Note

For fade-in/out effects, transition between opacity: 0 and opacity: 1 (not display: none/block). For accessible hiding, combine opacity with visibility: hidden/visible so the element is truly hidden from screen readers too.

CSS Transitions

Overview

Key Points

Examples

Common Mistakes

Note

Exercises

Knowledge Check

On which state should you place the transition property for a smooth two-way animation?