Why should you animate only transform and opacity?

The render pipeline is style → layout → paint → composite.

• Animating width, top, margin re-runs layout every frame → jank.
• Animating background-color, box-shadow re-runs paint.
• Animating transform / opacity only composites, on the GPU, off the main thread.

.panel { transition: transform .2s ease, opacity .2s ease; }
.panel--hidden { transform: translateY(8px); opacity: 0; }

@media (prefers-reduced-motion: reduce) {
  .panel { transition: none; }
}

will-change: transform hints ahead of time, but use it sparingly - each layer costs memory.