Transitioning Multiple CSS Properties Independently

Multi-Property Transitions

Instead of using transition: all, you can specify different transition settings for each property. This gives you precise control over how each aspect of the element changes.

CSS Code

.element {
  opacity: 0.8;
  transform: translateY(0) scale(1);
  background-color: #3b82f6;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  transition: opacity 0.2s ease-in,
              transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1),
              background-color 0.25s ease,
              box-shadow 0.3s ease-out;
}

.element:hover {
  opacity: 1;
  transform: translateY(-4px) scale(1.02);
  background-color: #2563eb;
  box-shadow: 0 8px 20px rgba(59, 130, 246, 0.25);
}

Why Not Just Use all?

Using transition: all 0.3s ease applies the same duration and timing to every property. This creates several problems:

1. Performance: The browser watches every animatable property for changes
2. Control: You cannot make opacity fade faster than transform moves
3. Side effects: Unintended transitions on properties you did not expect to change

Shorthand vs. Longhand

Shorthand (comma-separated):

transition: opacity 0.2s ease-in, transform 0.3s ease-out;

Longhand (separate properties):

transition-property: opacity, transform;
transition-duration: 0.2s, 0.3s;
transition-timing-function: ease-in, ease-out;
transition-delay: 0s, 0s;

Both produce the same result. Shorthand is more common and easier to read. Longhand can be useful when you need to override a single aspect (like timing function) in a child element.

Ordering Strategy

A useful pattern is to order properties by duration: shortest first. The fastest property (often opacity) provides immediate feedback, while slower properties (transform, shadow) create a layered, rich animation.