Animate Shadows via Pseudo-Element Opacity

Transitioning box-shadow directly forces expensive repaints. Instead, put the target shadow on a pseudo-element and animate its opacity.

Incorrect (animating box-shadow):

.card {
  box-shadow: var(--shadow-1);
  transition: box-shadow 0.2s ease;
}

.card:hover {
  box-shadow: var(--shadow-3);
}

Correct (pseudo-element opacity):

.card {
  position: relative;
  box-shadow: var(--shadow-1);
}

.card::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  box-shadow: var(--shadow-3);
  opacity: 0;
  transition: opacity 0.2s ease;
  pointer-events: none;
  z-index: -1;
}

.card:hover::after {
  opacity: 1;
}

Reference: Designing Beautiful Shadows in CSS