Combining Transforms with Transitions

Why Transform and Transition Are Usually Paired

transform describes a final visual state; transition describes how the browser gets there smoothly. Used together, they are the foundation of most modern hover effects and micro-interactions.

A Basic Hover "Lift" Effect

.card {
  transform: translateY(0);
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}
.card:hover {
  transform: translateY(-6px);
  box-shadow: 0 10px 24px rgba(0,0,0,0.15);
}

The card appears to lift slightly and gain a deeper shadow on hover, smoothly animating back down when the mouse leaves - both changes handled by a single transition declaration on the base state.

A Button Press Effect

.btn {
  transform: scale(1);
  transition: transform 0.1s ease;
}
.btn:active {
  transform: scale(0.96);
}

A very short transition duration (0.1s) makes the press feel immediate and responsive, rather than sluggish.

Why This Combination Performs Well

As covered in the performance-focused note in this section, transform is one of the cheapest properties for a browser to animate, since it does not force a layout recalculation. Pairing it with transition gives smooth, GPU-friendly motion without the jank that animating width/margin/top directly can cause.

A Common Pitfall to Avoid

/* Overwrites any transform already applied elsewhere via JS or another class */
.card:hover {
  transform: translateY(-6px);
}

Since an element can only have one transform value at a time, combining a hover-lift with, say, a separate scale effect requires listing both functions together in a single transform declaration, rather than expecting them to combine automatically from separate rules.