Performance Optimization in CSS

/* Optimize with transform and opacity */
.element {
  transform: translateX(100px); /* GPU accelerated */
  opacity: 0.5;                 /* GPU accelerated */
}

/* Use will-change */
.element {
  will-change: transform, opacity;
}

/* Force hardware acceleration */
.element {
  transform: translateZ(0); /* or translate3d(0,0,0) */
}