Use transform and opacity for animations

Layout-triggering properties (avoid animating):
  width, height, margin, padding, top, left, right, bottom,
  border-width, font-size, display, position
 
Paint-triggering properties (acceptable, but not ideal):
  color, background-color, box-shadow, border-color,
  outline, text-shadow
 
Compositor-only properties (optimal for animation):
  transform (translate, scale, rotate, skew)
  opacity
  filter (on composited layers)

/* ❌ Bad: animates layout properties — triggers full reflow each frame */
.slide-in {
  animation: slideIn 300ms ease-out;
}
 
@keyframes slideIn {
  from { left: -100%; }
  to { left: 0; }
}
 
/* ✅ Good: translate() is compositor-only */
.slide-in {
  animation: slideIn 300ms ease-out;
}
 
@keyframes slideIn {
  from { transform: translateX(-100%); }
  to { transform: translateX(0); }
}

/* ❌ Animates width/height — expensive */
.expand {
  animation: expand 300ms ease;
}
@keyframes expand {
  from { width: 0; height: 0; }
  to { width: 200px; height: 200px; }
}
 
/* ✅ Use scale() */
.expand {
  width: 200px;
  height: 200px;
  animation: expand 300ms ease;
}
@keyframes expand {
  from { transform: scale(0); }
  to { transform: scale(1); }
}

/* Fade in */
.fade-in {
  animation: fadeIn 300ms ease;
}
@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}
 
/* Slide up and fade in */
.slide-up {
  animation: slideUp 400ms cubic-bezier(0.16, 1, 0.3, 1);
}
@keyframes slideUp {
  from {
    opacity: 0;
    transform: translateY(16px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
 
/* Button press */
.button:active {
  transform: scale(0.97);
}

/* Hint to browser to promote this element to its own layer before animation starts */
.animated-card {
  will-change: transform;
}
 
/* ⚠️ Don't apply to too many elements — each layer uses GPU memory */
/* Apply just before animation, remove after */

/* ✅ Always honor the user's motion preferences */
.slide-in {
  animation: slideIn 400ms ease;
}
 
@media (prefers-reduced-motion: reduce) {
  .slide-in {
    animation: none;
    /* Provide a non-animated alternative if needed */
  }
}
 
/* Or use the safe pattern */
@media (prefers-reduced-motion: no-preference) {
  .slide-in {
    animation: slideIn 400ms ease;
  }
}